Vue CLI 是 Vue 官方提供的一款命令行工具，旨在帮助开发者快速搭建 Vue 项目，并提供了现代前端开发所需的开箱即用的功能和配置。它支持项目的脚手架创建、插件安装、热重载、代码分割等多种功能，让开发者专注于应用逻辑的实现，而无需过多关心配置细节。
在本篇文章中，我们将学习如何使用 Vue CLI 创建一个新的 Vue 项目，并深入了解 Vue CLI 的一些基础用法。
一、安装 Vue CLI
在使用 Vue CLI 创建项目之前，首先需要确保系统中已安装 Node.js 和 npm（Node 包管理器）。你可以通过以下命令检查是否已安装：
node -v
npm -v
如果未安装，可以访问 Node.js 官网 下载并安装最新版本。
安装 Vue CLI
Vue CLI 是一个全局命令行工具，可以通过 npm 安装。运行以下命令来全局安装 Vue CLI：
npm install -g @vue/cli
安装完成后，你可以通过以下命令验证是否成功安装：
vue --version
二、创建 Vue 项目
一旦 Vue CLI 安装成功，你就可以使用 vue create 命令来创建一个新的 Vue 项目。
1. 创建项目
在命令行中，进入你希望创建项目的文件夹，然后执行以下命令：
vue create my-vue-project
my-vue-project 是你项目的名称，你可以根据需要更改。执行后，CLI 会提示你选择配置方式：
- Default preset: 默认配置，包括 Babel 和 ESLint。
- Manually select features: 自定义配置，包括选择是否使用 Vue Router、Vuex、TypeScript 等。
选择一个适合的配置方式，CLI 会根据你的选择自动安装所需的依赖。
2. 配置项目
如果选择了 Manually select features，你会被要求选择需要的功能。以下是一些常见选项：
- Babel: 用于转译 JavaScript 代码，支持 ES6+ 语法。
- Router: 用于处理路由（多页面应用）。
- Vuex: 用于状态管理。
- CSS Pre-processors: 支持 Sass、Less 等 CSS 预处理器。
- ESLint: 代码风格检查工具。
选择你需要的功能后，CLI 会自动安装相应的依赖并生成项目文件。
三、运行 Vue 项目
项目创建完成后，进入项目目录，运行以下命令启动开发服务器：
cd my-vue-project
npm run serve
命令执行后，你将看到如下输出：
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.x.x:8080/
打开浏览器，访问 http://localhost:8080/，你会看到 Vue 的欢迎页面，表示项目创建成功并正在运行。
四、项目结构解析
Vue CLI 创建的项目默认包含以下结构：
my-vue-project/
├── node_modules/ # 存放项目依赖的文件夹
├── public/ # 存放静态文件（如 HTML、图片等）
│ └── index.html # 入口 HTML 文件
├── src/ # 存放源代码
│ ├── assets/ # 存放静态资源（如图片、样式等）
│ ├── components/ # 存放 Vue 组件
│ ├── App.vue # 根组件
│ ├── main.js # 入口 JS 文件
├── package.json # 项目配置文件，记录了项目依赖及其他信息
└── vue.config.js # 可选的 Vue 配置文件
- node_modules/: 存放项目的依赖包。
- public/: 存放公共资源（如
index.html）。这里的内容不会被 webpack 打包，直接原样引用。 - src/: 存放源代码。你大多数的开发工作都会在这个目录下进行。
- package.json: 记录项目依赖、脚本命令等信息。
- vue.config.js: 可选的配置文件，用于修改 Vue CLI 的默认配置。
五、安装插件和依赖
Vue CLI 提供了丰富的插件系统，可以帮助你更快速地集成第三方库或功能。比如，如果你需要添加 Vue Router 或 Vuex，可以通过以下命令安装：
安装 Vue Router
vue add router
安装 Vuex
vue add vuex
使用 vue add 命令，CLI 会自动为你安装并配置这些插件。
六、构建和部署项目
开发完成后，你可以使用 Vue CLI 提供的构建命令，将项目打包成静态文件，准备部署到生产环境。
构建项目
npm run build
构建完成后，生成的静态文件将会存放在 dist/ 目录中。你可以将这些文件部署到任何静态文件服务器（如 GitHub Pages、Netlify、Vercel 等）上。
七、热重载与开发模式
在开发过程中，Vue CLI 会启用 热重载 功能。这意味着你可以在修改代码后，浏览器会自动刷新并显示最新的效果，而无需手动刷新页面。
开发模式下的常用命令：
npm run serve：启动开发服务器，支持热重载。npm run lint：运行 ESLint，检查代码质量。npm run build：构建项目，准备部署。
八、配置 Vue CLI
除了创建项目时选择的功能外，Vue CLI 还支持进一步的配置。你可以通过 vue.config.js 文件自定义配置，如修改 webpack 配置、代理设置、输出目录等。
配置 Vue CLI
// vue.config.js
module.exports = {
publicPath: '/my-app/', // 设置项目的公共路径
outputDir: 'dist', // 设置输出目录
devServer: {
proxy: 'http://localhost:4000' // 配置开发服务器的代理
}
};
