Vue CLI 3
https://cli.vuejs.org/zh/guide/
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过
@vue/cli搭建交互式的项目脚手架。通过
@vue/cli+@vue/cli-service-global快速开始零配置原型开发。-
一个运行时依赖 (
@vue/cli-service)，该依赖：- 可升级；
基于webpack构建，并带有合理的默认配置； - 可以通过项目内的配置文件进行配置；也就是我们的
vue.config.js，vue/config.js创建 - 可以通过插件进行扩展。
- 可升级；
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理
Vue.js项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
CLI
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想法的原型。
你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。vue ui 拥有一套强大的图形分析功能可以提供项目优化选项
CLI 服务
CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。
CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：
- 加载其它 CLI 插件的核心服务；
- 一个针对绝大部分应用优化过的内部的
webpack配置； - 项目内部的
vue-cli-service命令，提供serve、build和inspect命令。
npm run serve 会增加开发环境变量，符合原有的 webpack 开发运行服务策略，不会生成实体 dist 目录文件、提供热加载功能已优化开发效率。
npm run build 会增加生产环境变量
CLI 插件
CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。
当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。
创建一个项目
命令新建 vue 项目
vue create demo
使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目
浏览器兼容性
browserslist https://github.com/browserslist/browserslist
你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
Polyfill
一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app ，它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill。
Babel https://babeljs.io/
生成的配置内容：
module.exports = {
presets: [
'@vue/app',
],
plugins: [
]
};
HTML 和静态资源
public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。
插值
因为 index 文件被用作模板，所以你可以使用 lodash template 语法插入内容：
- <%= VALUE %> 用来做不转义插值；
- <%- VALUE %> 用来做 HTML 转义插值；
- <% expression %> 用来描述 JavaScript 流程控制。
除了被 html-webpack-plugin 暴露的默认值 之外，所有客户端环境变量也可以直接使用。
Preload
<link rel="preload"> 是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。
默认情况下，一个 Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示。
这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('preload') 进行修改和删除。
Prefetch
<link rel="prefetch"> 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。
默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。
这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('prefetch') 进行修改和删除。
示例：
// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 或者
// 修改它的选项：
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
当 prefetch 插件被禁用时，你可以通过 webpack 的内联注释手动选定要提前获取的代码区块：
import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
webpack 的运行时会在父级区块被加载之后注入 prefetch 链接。
提示
Prefetch 链接将会消耗带宽。如果你的应用很大且有很多 async chunk，而用户主要使用的是对带宽较敏感的移动端，那么你可能需要关掉 prefetch 链接并手动选择要提前获取的代码区块。
Vue template - lodash https://lodash.com/docs/4.17.10#template
构建一个多页应用
不是每个应用都需要是一个单页应用。Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能。
静态资源可以通过两种方式进行处理：
在 JavaScript 被导入或在
template/CSS中通过相对路径被引用。这类引用会被webpack处理。放置在
public目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过webpack的处理。
环境变量和模式
你可以替换你的项目根目录中的下列文件来指定环境变量：
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
一个环境文件只包含环境变量的“键=值”对：
FOO=bar
VUE_APP_SECRET=secret
被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
- test 模式用于 vue-cli-service test:unit
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：
console.log(process.env.VUE_APP_SECRET)
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：
- NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
- BASE_URL - 会和
vue.config.js中的baseUrl选项相符，即你的应用会部署到的基础路径。
所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。
提示
你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。这可以用于版本信息 process.env.VUE_APP_VERSION = require('./package.json').version。
