用Vue CLI脚手架创建Vue 3项目入门指南

Vue 3入门之八：使用脚手架创建Vue 3项目

前言

我们在之前的文章中学习了如何在不使用脚手架的情况下从头开始创建 Vue 3 项目，以及 Composition API 的基础知识。在本教程中，我们将介绍 Vue CLI 脚手架，它可以帮助我们快速轻松地启动和运行 Vue 3 项目。

什么是 Vue CLI 脚手架？

Vue CLI 脚手架是一个命令行界面 (CLI)，它为我们提供了创建和管理 Vue.js 项目的脚手架。它包含了创建新项目、添加依赖项、构建和部署应用程序所需的所有工具。

安装 Vue CLI

首先，我们需要在我们的系统上安装 Vue CLI。我们可以使用以下命令通过 npm 来完成：

npm install -g @vue/cli

安装完成之后，我们可以通过运行以下命令来检查版本：

vue --version

创建一个新项目

要创建一个新的 Vue 3 项目，我们可以使用以下命令：

vue create my-vue3-project

这将在我们的当前目录中创建一个名为 my-vue3-project 的新项目。

项目结构

使用脚手架创建的 Vue 3 项目具有以下默认结构：

my-vue3-project/
  package.json
  src/
    App.vue
    main.js
  public/
    index.html
  .vuepressrc.js

运行项目

要运行项目，我们可以使用以下命令：

cd my-vue3-project
npm run serve

这将在我们的本地计算机上启动一个开发服务器，并在浏览器中打开项目。

添加依赖项

我们可以使用以下命令来添加依赖项到项目中：

npm install [dependency-name]

例如，要添加 axios 依赖项，我们可以使用以下命令：

npm install axios

构建项目

要构建项目，我们可以使用以下命令：

npm run build

这将创建项目的可部署版本，存储在 dist 文件夹中。

部署项目

部署项目的具体方式将根据我们的托管提供商而有所不同。对于静态网站，我们可以使用以下命令将项目部署到 GitHub Pages：

npm run deploy

高级用法

除了基本用法之外，Vue CLI 脚手架还提供了许多高级功能，例如：

• 创建具有路由、状态管理和测试的复杂项目
• 集成 Babel、TypeScript 和 ESLint 等工具
• 使用构建加速器来提高构建速度

结论

使用 Vue CLI 脚手架可以快速轻松地启动和运行 Vue 3 项目。它为我们提供了创建、管理和部署应用程序所需的所有工具。通过利用脚手架的功能，我们可以专注于构建我们的应用程序，而不必担心基础设施的细节。