Vue.js 的构建工具 Vue CLI 如何使用？

当前位置：技术文章>> Vue.js 的构建工具 Vue CLI 如何使用？

Vue CLI（Vue.js 的命令行工具）是 Vue.js 项目的标准构建工具，它提供了从项目初始化、开发到构建部署的一整套流程支持。以下是 Vue CLI 的基本使用方法：

在开始之前，请确保你的计算机上已安装了 Node.js 和 npm（Node.js 的包管理工具）。Vue CLI 的安装通过 npm 进行。

全局安装 Vue CLI

如果你之前安装过旧版本的 vue-cli（1.x 或 2.x），可能需要先卸载它，使用以下命令之一：
```
npm uninstall vue-cli -g
# 或者
yarn global remove vue-cli
```
然后，安装 Vue CLI 3.x 或更高版本（Vue CLI 3 的包名称由 vue-cli 改成了 @vue/cli）：
```
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
```
安装完成后，你可以通过运行 vue --version 或 vue -V 来检查 Vue CLI 是否正确安装以及安装的版本。

使用 vue create 命令

在命令行中，导航到你希望创建项目的目录，然后运行以下命令：
```
vue create <project-name>
```
将 <project-name> 替换为你希望的项目名称（注意文件名不支持驼峰命名，即不要包含大写字母）。
选择预设或手动配置

创建过程中，Vue CLI 会提示你选择一个预设（preset）或手动配置项目。预设是之前保存的项目配置模板，如果没有预设配置，你可以选择默认的 default (babel, eslint) 预设，或者选择 Manually select features 进行手动配置。

在手动配置中，你可以根据需要选择 Babel、TypeScript、Router、Vuex、CSS 预处理器、Linter/Formatter、单元测试等特性。
完成创建

选择完所有需要的特性和配置后，Vue CLI 会自动创建项目并安装依赖。创建完成后，你可以通过命令行进入项目目录，并启动开发服务器：
```
cd <project-name>
npm run serve
```
这将启动一个热重载的本地开发服务器，并在控制台中显示项目的本地访问地址。

Vue CLI 创建的项目通常包含以下结构和文件：

public/：公共静态资源目录，如 index.html 入口文件。
src/：源码目录，包含项目的所有源代码。
- assets/：资源目录，如图片、字体等。
- components/：Vue 组件目录。
- router/：Vue Router 路由配置文件目录。
- store/：Vuex 状态管理目录（如果项目中使用了 Vuex）。
- views/：页面组件目录（通常用于单页面应用）。
- App.vue：根组件。
- main.js：入口 JS 文件。
babel.config.js：Babel 配置文件。
package.json：项目基本信息和脚本配置。
vue.config.js（可选）：Vue CLI 配置文件，用于自定义项目的构建和开发设置。

在开发过程中，你可以使用 Vue CLI 提供的开发服务器进行热重载开发。当项目开发完成并准备部署时，你可以使用 npm run build 命令来构建生产版本的项目。构建完成后，生产版本的文件将生成在 dist/ 目录中，你可以将这个目录部署到服务器上。