vue-cli是Vue官方提供的开发脚手架，能快速创建一个开发的demo，并且部分配置也已经配置好了可以直接进行项目开发。
安装vue-cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
更新vue-cli
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
创建项目
vue create <projectName>
选择模版
它会提示你选择一个预设项，下面的第一个是我曾创建时保存的一个模板，默认是让选择vue2、vue3、自定义
Vue CLI v4.5.11
┌───────────────────────────────────────────┐
│ │
│ New version available 4.5.11 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└───────────────────────────────────────────┘
vue3-template ([Vue 3] dart-sass, babel, router, vuex, eslint)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
选择自定义模块
选择自定义后会提示你选择需要的模块
Vue CLI v4.5.11
┌───────────────────────────────────────────┐
│ │
│ New version available 4.5.11 → 4.5.13 │
│ Run npm i -g @vue/cli to update! │
│ │
└───────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
◉ Choose Vue version //选择vue版本
◉ Babel // 处理es6兼容性插件
◯ TypeScript //使用ts创建项目
❯◯ Progressive Web App (PWA) Support // 用vue开发APP应用
◯ Router //vue的路由
◯ Vuex // vue状态管理
◯ CSS Pre-processors // less、sass处理
◉ Linter / Formatter // 检查语法的插件
◯ Unit Testing //单元测试
◯ E2E Testing //端对端测试
在操作提示的最后你可以选择将已选项保存为一个将来可复用的preset，会被保存到用户目录下名为.vuerc的JSON文件，可通过修改该文件删除已保存的设置。
图形化UI创建
vue ui
运行此命令就会打开一个网页，可在此网页中选择进行配置。
使用cli安装插件
# 使用短名称安装插件
vue add eslint
vue add apollo
# 使用完整名称安装插件
vue add @foo/bar
# 可以向被安装的插件传递生成器选项 (这样做会跳过命令提示)
vue add eslint --config airbnb --lintOn save
...
vue配置
之前的css、webpack等配置都是webpack.config.js中进行配置，有时候还需要引入node中的库，而vue.config.js对此进行了一次封装，让我们可以只关注配置本身，不需要考虑其他的。
这个文件应该导出一个包含了选项的对象：
module.exports = {
// 选项...
}
可配置的选项比较多，这里就简单的挑几个做个示例，其他的可在👉选项查看。
vue.config.js
module.exports = {
outputDir: 'dist',
configureWebpack: {
plugins: [
new BannerPlugin({
banner: 'bennett-hibennett.cn'
})
]
}
};
参考的官方文档
Vue CLI：https://cli.vuejs.org/zh/guide
配置参考：https://cli.vuejs.org/zh/config/#vue-config-js
