vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。vue-cli 从 2.0 到 3.0 的升级有非常多的变化，这篇文章作为一个对比 2.0 升级功能的导读，让你快读了解 3.0 更新内容，陆续更新。
一、创建项目
创建项目命令
vue create my-project
3.0版本包括 默认预设配置 和 用户自定义设置
自定义功能配置包括以下功能：
- TypeScript
- Progressive Web App (PWA) Support
- Router
- Vuex
- CSS Pre-processors
- Linter/Formatter
- Unit Testing
- E2E Testing
可以注意到 3.0 版本直接新加入了 TypeScript 以及 PWA 的支持。
- 在选择 CSS 预处理器后会提示选择哪一种预处理器：
- Scss/Sass
- Less
- Stylus
- 以及 eslint 规范的选择：
- ESLint with error prevention only
- ESLint + Airbnb config
- ESLint + Standard config
- ESLint + Prettier
- 最后选择 Babel，PostCSS，ESLint 等自定义配置的存放位置：
- In dedicated config files
- In package.json
选择好后，可以把以上配置存储为预设值，以后通过 vue-cli 创建其他项目将都采用刚才的配置。
二、项目目录结构
我们对比发现 vue-cli 3.0 默认项目目录相比 2.0 来说精简了很多。
- 移除了配置文件目录， config 和 build 文件夹。
- 移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中。
- 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件。
三、移除了配置文件目录后如何自定义配置
从 3.0 版本开始，在项目的根目录放置一个 vue.config.js 文件，可以配置该项目的很多方面。
vue.config.js 应该导出一个对象，例如：
module.exports = {
baseUrl: '/',
outputDir: 'dist',
lintOnSave: true,
compiler: false,
// 调整内部的 webpack 配置。
// 查阅 [https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md](https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md)
chainWebpack: () => {},
configureWebpack: () => {},
// 配置 webpack-dev-server 行为。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 查阅 [https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md](https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md)#配置代理
proxy: null,// string | Object
before: app => {}
}
....
}
调整 webpack 配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象，该对象将会被webpack-merge合并入最终的 webpack 配置。
示例代码：配置 webpack 新增一个插件。
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
修改插件选项的参数你将需要熟悉webpack-chain的 API，并阅读一些源码以便了解如何权衡这个选项的全部配置项，但是它给了你比直接修改 webpack 配置中的值更灵活且安全的方式。
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
return [/* new args to pass to html-webpack-plugin's constructor */]
})
}
}
注意：当我们更改一个 webpack 配置的时候，可以通过vue inspect > output.js输出完整的配置清单，注意它输出的并不是一个有效的 webpack 配置文件，而是一个用于审查的被序列化的格式。
四、ESLint、Babel、browserslist 相关配置：
- Babel 可以通过.babelrc 或 package.json 中的
babel 字段进行配置。 - ESLint 可以通过.eslintrc 或 package.json 中的 eslintConfig 字段进行配置。
- package.json 中的 browserslist 字段指定了该项目的目标浏览器支持范围。
五、关于 public 目录的调整
vue 约定public/index.html作为入口模板会通过html-webpack-plugin插件处理。在构建过程中，资源链接将会自动注入其中。除此之外，vue-cli 也自动注入资源提示（preload/prefetch），在启用 PWA 插件时注入manifest/icon/链接，并引入(inlines) webpack runtime / chunk manifest清单已获得最佳性能。
在 JavaScript 或者 SCSS 中通过 相对路径 引用的资源会经过 webpack 处理，放置在 public 文件夹的资源可以通过绝对路径引用，这些资源将会被复制，而不经过 webpack 处理。
小提示：图片最好使用相对路径经过 webpack 处理，这样可以避免很多因为修改网站根目录导致图片404的问题。
六、新增功能
1. 对 TypeScript 的支持
在 3.0 版本中，选择启用 TypeScript 语法后，vue 组件的书写格式有特定的规范。
示例代码：
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
const s = Symbol('baz')
@Component
export class MyComponent extends Vue {
@Emit()
addToCount(n: number){ this.count += n }
@Emit('reset')
resetCount(){ this.count = 0 }
@Inject() foo: string
@Inject('bar') bar: string
@Inject(s) baz: string
@Model('change') checked: boolean
@Prop()
propA: number
@Prop({ default: 'default value' })
propB: string
@Prop([String, Boolean])
propC: string | boolean
@Provide() foo = 'foo'
@Provide('bar') baz = 'bar'
@Watch('child')
onChildChanged(val: string, oldVal: string) { }
@Watch('person', { immediate: true, deep: true })
onPersonChanged(val: Person, oldVal: Person) { }
}
以上代码相当于
const s = Symbol('baz')
export const MyComponent = Vue.extend({
name: 'MyComponent',
inject: {
foo: 'foo',
bar: 'bar',
[s]: s
},
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
propA: Number,
propB: {
type: String,
default: 'default value'
},
propC: [String, Boolean],
},
data () {
return {
foo: 'foo',
baz: 'bar'
}
},
provide () {
return {
foo: this.foo,
bar: this.baz
}
},
methods: {
addToCount(n){
this.count += n
this.$emit("add-to-count", n)
},
resetCount(){
this.count = 0
this.$emit("reset")
},
onChildChanged(val, oldVal) { },
onPersonChanged(val, oldVal) { }
},
watch: {
'child': {
handler: 'onChildChanged',
immediate: false,
deep: false
},
'person': {
handler: 'onPersonChanged',
immediate: true,
deep: true
}
}
})
更多详细内容请关注 这里 。
2. 对 PWA 的支持
当我们选择启用 PWA 功能时，在打包生成代码时会默认生成 service-worker.js 和 manifest.json 相关文件。如果你不了解 PWA，点击 这里 查看。
注意：在 manifest.json 生成的图标信息，可以在 public/img 目录下替换。
默认情况 service-worker 采用的是 precache，可以通过配置 pwa.workboxPluginMode 自定义缓存策略。点击 详情 。
配置示例
// Inside vue.config.js
module.exports = {
// ...其它 vue-cli 插件选项...
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc 中 InjectManifest 模式下是必填的。
swSrc: 'dev/sw.js',
// ...其它 Workbox 选项...
},
},
};
总结
vue-cli 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平衡衔接，这样你可以专注在编写你的应用上，而不必花好几天时间去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性。
