Vue Cli脚手架

Vue CLI 是Vue官方提供的基于 Webpack 的 Vue 工具链，用于快速搭建vue项目的开发框架。@vue/cli为Vue项目开发提供完整的、全方位的支持，致力于将Vue生态中的工具基础标准化，配备了Vue项目开发所需的各种工具，并提供了最优化的平衡配置。大大简化了webpack那一堆复杂的配置，无需去纠结各种配置，可先跳过webpack直接开干vue项目。

• Vue CLI 5.* 中文文档 和vue2配套使用，也支持vue3。
• 新一代的Vue Cli是 Vite，和Vue3 搭配。

  CLI：Command-Line Interface，命令行界面, 俗称脚手架。

🔸Vue-cli主要作用：

• 项目脚手架，快速搭建vue项目框架。
• 开箱即用的开发/构建环境，vue-cli 基于webpack，集成了大量常用组件，抽象了webpack的配置（vue.config.js）。所以webpack中那些代码编译、打包、热更新等功能都开箱即用。
• 图形化的项目管理功能，vue ui安装/使用 vue可视化项目管理工具，这个好评！

🔸Vue-cli 三个核心组成部分：

• CLI：全局安装的npm包@vue/cli，提供vue指令功能。
• CLI服务：@vue/cli-service提供开发环境的编译、热更新功能，安装在每个vue项目中。构建于webpack + webpack-dev-server之上，包含了：
  • 加载其他CLI插件的核心服务。
  • 优化过的webpack配置vue.config.js。
  • 提供的vue-cli-service命令：serve、build、inspect
• CLI插件：提供了大量可选的vue项目所需的npm包，
  • @vue/cli-：为内建插件。
  • vue-cli- ：为社区插件。
  • 运行cli服务时会自动更新package.json中的包。

    安装@vue/cli

    依赖环境：node.js + npm +[webpack]。全局安装@vue/cli插件：npm install -g @vue/cli ``` npm install -g @vue/cli //安装插件 vue —version //查看版本：@vue/cli 5.0.8 //安装vue-cli的可视化管理工具 vue ui

//创建项目，在工程目录下执行指令，项目会创建在该目录下 vue create vuep3

安装完`@vue/cli`后可用的vue指令：

| vue指令 |  |
| --- | --- |
| vue -V | vue-cli的版本 |
| vue -h | 查看帮助，在命令后面加-h可以获得对应命令的帮助说明 |
| vue create <项目名称> | 创建一个项目， |
| vue ui | 创建/启动 一个 vue-cli 的图形化管理工具，就可以可视化管理项目了，基本涵盖大部分指令功能 |
| 项目目录下运行 |  |
| vue upgrade | 升级项目中cli插件的版本，vue upgrade --all 升级所有插件 |
| vue add <plugin> | 在vue-cli中新增一个vue插件，也可以用npm，vue会提供更好（五星级）的安装服务<br />如`vue add eslint`实际过程：包名解析为完整的“@vue/cli-plugin-eslint”，然后npm安装 |

`vue ui`安装个vue项目管理工具，所有的插件管理、依赖管理、配置、开发服务等都可以在线可视化操作了！<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/393451/1665195325664-a15d5019-dfa2-4fbd-8276-6b8bfcfde7ed.png#clientId=u2d370bf8-fb68-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=379&id=uc58ece6c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=379&originWidth=920&originalType=binary&ratio=1&rotation=0&showTitle=false&size=74652&status=done&style=none&taskId=u087d2c5d-552b-41e4-92a7-62e7e8d50af&title=&width=920)
> 命令行运行指令：`vue ui`

![image.png](https://cdn.nlark.com/yuque/0/2022/png/393451/1665198542150-ade8848f-a240-43c8-a4c8-8249ffe52d37.png#clientId=u2d370bf8-fb68-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=135&id=uec87a1fc&margin=%5Bobject%20Object%5D&name=image.png&originHeight=135&originWidth=398&originalType=binary&ratio=1&rotation=0&showTitle=false&size=5229&status=done&style=none&taskId=u7a273488-5c08-4004-9646-08d25f24b71&title=&width=398)
<a name="Y4lEL"></a>
## CLI服务@vue/cli-service
`@vue/cli-service`提供开发环境的编译、热更新功能，安装在每个vue项目中，通过vue-cli脚手架创建的项目就默认安装了。提供了一个名为 vue-cli-service 的命令，提供了提供的`serve`、`build`、`inspect`等命令。<br />运行`npm run serve`启动开发服务器，实时更新。注意如果修改了配置文件（如vue.config.js），则需要重启serve才生效。

| **vue-cli-service指令** | **npm指令** | **vue指令** | **描述** |
| --- | --- | --- | --- |
| vue-cli-service serve | npm run serve | vue serve | 启动开发服务，开发模式热更新，代码修改自动编译更新，可实时调试 |
| vue-cli-service build | npm run build | vue build | 编译代码，默认模式是production（生产环境），在dist目下输出。 |
| vue-cli-service test:unit | npm run test:unit |  | 运行单元测试 |
| vue-cli-service lint | npm run lint |  | 代码检查 |
| vue-cli-service inspect | npm run inspect | vue inspect | 检查被所有 cli 插件解析后的 webpack配置，可以输出到文件查看 |
| <指令> -help |  |  | 查看帮助 |

> **注意**：指令在项目目录下运行。

在`package.json`中自动配置了npm指令：

“scripts”: { “serve”: “vue-cli-service serve”, “build”: “vue-cli-service build”, “test:unit”: “vue-cli-service test:unit”, “lint”: “vue-cli-service lint” },

> 编译缓存（cache-loader）：Vue/Babel/TypeScript 编译缓存到目录 node_modules/.cache 下，如果有编译问题，可清空缓存试试。

<a name="tv2DP"></a>
## 创建项目-项目结构
基于`@vue/cli` 5.0.8 版本创建项目：`vue create vuep3`，选择vue2版本，选择了babel、router、vuex、less、eslint、test，完成后的项目工程目录结构如下：

| 项目目录/文件 | 描述 |
| --- | --- |
| 📁**dist** | 编译输出目录，默认每次编译会清空 |
| 📁node_modules | 项目的所有依赖包资源，有点多，第一层目录级就700+ |
| 📁**public** | 不需要编译打包的静态文件，直接拷贝目录下内容到dist |
| 📁img/css/js | 资源目录 |
| index.html | 入口html文件，构建时会注入资源（js、css、图标等），可以插值 |
| manifest.json | 离线缓存配置，用于创建桌面app的块级入口 |
| favicon.ico | 网页图标logo |
| robots.txt | 爬虫配置 |
| 📁**src** | 开发目录，搬砖写Bug的地方 |
| 📁assets | 图片、CSS、字体文件等静态资源（ /ˈæset/资产），与`public`区别是会被webpack编译 |
| 📁components | 项目公共组件 |
| 📁router/router.js | vue-router路由文件 |
| 📁store/store.js | vuex公共库文件 |
| 📁views | 页面视图，用router路由 |
| **App**.vue | 应用程序根组件 |
| **main**.js | 应用程序入口文件，引入其他组件；创建根Vue实例，渲染App.vue，mount到index.html |
| registerServiceWorker.js | web workers文件 |
| 📁test | 单元测试 |
| .browserslistrc | 浏览器兼容性配置，在构建中使用 |
| .eslintrc.js | eslint 的配置文件 |
| .gitignore | git的忽略配置 |
| babel.config.js | babel配置，用于转换ES6语法 |
| jsconfig.json | 单元测试配置 |
| package-lock.json | 用于锁定模块依赖树的版本，避免多人开发的版本差异 |
| package.json | 项目npm依赖包配置 |
| vue.config.js | vue配置文件 |
| readme.md | 项目自我介绍文档 |

运行`npm run serve`启动项目，项目入口文件的引用关系如下图。

App running at:

• Local: http://localhost:3000/
• Network: http://localhost:3000/ ```

  vue.config.js

  vue.config.js 是vue的全局配置，这个文件导出一个配置对象，module.exports = defineConfig({ })。是vue-cli 抽象出来的配置，会被自动合并（应用）到webpack.config.js等插件中，所以尽量不要重复修改webpack中的配置。