第十章 Vue-CLI 3.x 脚手架构建项目

10.1 什么是 Vue-CLI

1. Vue-CLI 是 Vue 官方提供的, 用来搭建项目脚手架的工具，它是 Vue.js 开发的标准工具，它已经集成了webpack , 内置好了很多常用配置, 使得我们在使用 Vue 开发项目时更加的标准化
2. 作用： 通过 Vue-CLI 下载模板项目
3. 官方文档：https://cli.vuejs.org/zh
4. github站点：https://github.com/vuejs/vue-cli

10.2 Vue CLI 安装

1. 全局安装 Vue-CLI
   
2. 安装成功后，在命令行可以使用 vue 命令，比如查看当前安装的版本：
   

10.3 基于 Vue-CLI 创建项目

运行 vue create 命令来创建一个新项目

10.3.1 创建默认项目

1. 在 D:\Project\vue\WebStudy 目录下打开命令行窗口，输入以下命令进行新建项目，项目名是 vue-cli-demo1
   

2. 进入： cd vue-cli-demo1

3. 运行： npm run serve

4. 访问：http://localhost:8080
   

10.3.2 创建自定义项目

1. 在 D:\Project\vue\WebStudy 目录下打开命令行窗口，输入以下命令进行新建项目，项目名是 vue-cli-demo2
   选择 Manually select features 手动选择自定义配置进行创建项目

2. 如下图，根据项目需求, 选择哪些配置选项
   注意：按 空格键 是选中或取消， a 键是全选
   
   选择对应配置选项:
   按回车，选择vue版本
   选择后按回车键, 会提示: 是否使用 history 模式的路由, 按回车即可
   选择CSS预处理器
   选择ESLint + Prettier
   选择语法检查方式，这里我选择: 保存就检测
   会提示: 把babel,postcss,eslint这些配置放哪，我选择: 放在独立文件中, 然后回来即可
   会提示: 是否将当前项目设置的配置保存为预配置, 方便后面创建项目时, 继续使用这套配置?
   按回车保存即可, 下次创建项目时,就会多有一个选项(vue-cli-demo2)
   如果要删除 preset（预配置），在 C:\Users\你的用户名 目录下的 .vuerc 文件中删除
   确定后，等待下载依赖模块
   运行
   
   

10.4 CLI 服务命令

CLI 服务 ( @vue/cli-service ) 是一个开发环境依赖。针对绝大部分应用优化过的内部的 webpack 配置
在一个 Vue CLI 项目中， @vue/cli-service 模块安装了一个名为 vue-cli-service 的命令
在 package.json 中的 scripts 指定 vue-cli-service 相关命令
serve 启动一个开发环境服务器(基于 webpack-dev-server)
修改组件代码后，会自动热模块替换
build 会项目根目录下自动创建一个 dist/ 目录，打包后的文件都在其中
打包后的 js 会自动生成后缀为 .js 和 .map 的文件
js文件: 是经过压缩加密的，如果运行时报错，输出的错误信息无法准确定位到哪里的代码报错
map文件：文件比较大， 代码未加密，可以准确的输出是哪一行哪一列有错
lint 使用 Eslint 进行检查并修复代码的规范
比如: 将 main.js 中的格式多加个空格 ，执行 npm run lint 后它会自动的去除多余空格
执行命令方式：

10.5 脚手架项目结构

10.6 自定义配置

在项目根目录下创建 vue.config.js 文件
vue.config.js 基本常用配置（其他的具体看文档: https://cli.vuejs.org/zh/config/#vue-config-js）

10.7 Eslint 插件

10.7.1 什么是 ESLint

ESLint 是一个语法规则和代码风格的检查工具，可以 用来保证写出语法正确、风格统一的代码。如果我们开启了 Eslint , 也就意味着要接受它 非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写 分号等等，这些规则其实是可以设置的。

10.7.2 Eslint 配置介绍

在项目根目录下的 package.json 文件中有 eslintConfig 选项中配置, 或者 .eslintrc.js 配置

10.7.3 自定义语法规则

1. 语法规则写在 package.json 或 .eslintrc.js 文件中 rules 选项中, 语法如下：
   规则值：
   
2. 常用 Eslint 规则配置参数
   

10.7.4 按规则自动修复代码

执行下面命令会根据 Eslint 定义的语法规则进行检查，并按语法规则进行自动修复项目中不合规的代码

10.8 创建 .vue 模板代码

10.8.1 安装插件识别vue文件

插件库中搜索 Vetur 安装

10.8.2 配置模板代码片段

1. 依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户代码片段)”，此时，会弹出一个搜索框，输入 vue ， 如下：
   
2. 选择 vue 后，VS Code 会自动打开一个名字为 vue.json 的文件，复制以下内容到这个文件中
   
   保存后关闭这个文件
   说明： $0 生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令

10.8.3 测试

新建一个名为 Demo.vue 的文件，输入 vue ，此时编辑区会有一系列提示，选择 Log output to console 这一项

10.9 部署项目

10.9.1 打包项目

进入到打包的项目文件夹下,运行以下命令
打包成功后，项目文件夹下会多出 dist 目录，那么你可以将 dist 目录里构建的内容部署到任何静态文件服务器中。这里其实是调用了 webpack 来实现打包的