Vue Cli 3 官方文档：https://cli.vuejs.org/zh/guide/
一、安装 @vue/cli
更新到 3.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli
如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x)，首先需要使用以下命令卸载掉
// 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
然后重新安装新版本的 @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装完成后，可以使用 vue -V （这个 V 是大写的）查看版本号
二、创建项目的三种方式
1.x 和 2.x 的的 vue-cli 采用 init 命令创建项目
vue init webpack project-name
3.x 也支持这种方式，其运行结果和以前一样，详情可以参考《Vue 爬坑之路（一）》
但刚入行的前端萌新可能还不习惯命令行的构建方式
于是 vue/cli 3.x 新增了图形化的方式来创建项目
首先还是得在指定目录下打开终端，然后运行：
vue ui
然后浏览器会打开一个页面，可以按照页面将的引导创建项目
不过我还是建议使用命令行工具，这才符合一个程序员的身份嘛
vue create project-name
这里的 project-name 是自定义的项目名称，命令执行之后，会生成对应文件夹
三、参数详解
使用 create 命令创建项目的时候，有很多配置项需要选择
如果对某项配置项不熟悉，可以直接选择第一个选项
首先需要选择模块
如果选择默认选项 default，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex）
这里推荐选择第二项 Manually select features
然后根据自己的需求，使用空格键选择具体的模块
如果不熟悉上面的模块分别代表什么，可以先按照上图的示意勾选模块
这样就会创建一个包含 vue-router、vuex 和 postcss 的项目
关于 vue-router 和 vuex 可以参考我之前的博客：
《Vue 爬坑之路（三）—— 使用 vue-router 跳转页面》
《Vue 爬坑之路（四）—— 与 Vuex 的第一次接触》
勾选之后，使用回车键进入下一步
这里需要选择路由模式，yes 是 history 模式，no 是 hash 模式
萌新可以先从 hash 模式入手，不过实际项目通常采用 history 模式
然后选择一个合适 CSS 的预编译工具
都不熟悉的话就选 sass 或者 less，因为 stylus 不支持原生 CSS 写法
后面还需要选择 ESLint 的校验规则，格式化的时机，和各个插件的配置项的位置，不熟悉的话就选第一个
然后就有了这样的过程：
最后选择是否将配置项保存为预设，然后配置完成，开始生成项目
项目生成之后，已经自动安装了相关的依赖项，这时候可以直接启动项目：
npm run serve
四、vue.config.js
完成以上步骤之后，就已经可以开发 vue 项目了，但无法满足定制化的开发需求
这时候就需要手动创建一个 vue.config.js，官方的配置文档可以参考这里
这里我贴一个常用的 vue.config.js
// vue.config.js
module.exports = {
baseUrl: '/',
outputDir: 'dist', // 打包的目录
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
devServer: {
open: true, // 启动服务后是否打开浏览器
host: '0.0.0.0',
port: 8080, // 服务端口
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
}
vue.config.js 还有很多很厉害的配置项
比如构建多页面应用的 pages、改造为 pwa 的配置项 pwa、**高级 CSS 打包方案 ** css
// vue.config.js
module.exports = {
// 选项...
// 当使用基于 HTML5 history.pushState 的路由时；
// 当使用 pages 选项构建多页面应用时。
baseUrl:"./",
// 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
outputDir:"dist",
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir:"assets",
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath:"index.html",
// 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
filenameHashing:true,
// 多页面
pages:undefined,
// 编译警告
lintOnSave:false,
// 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
runtimeCompiler:false,
// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
transpileDependencies:[],
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap:false,
// 设置生成的 HTML 中 和