vue-cli 是 vue 官方團隊推出的一款快速開發(fā) vue 項目的構建工具灸姊，具有開箱即用并且提供簡潔的自定義配置等功能。vue-cli 從 2.0 到 3.0 的升級有非常多的變化店枣，這篇文章作為一個對比 2.0 升級功能的導讀灸促，讓你快讀了解 3.0 更新內容，陸續(xù)更新。
一变隔、創(chuàng)建項目
創(chuàng)建項目命令
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 規(guī)范的選擇：
- 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 創(chuàng)建其他項目將都采用剛才的配置肌厨。
二、項目目錄結構
我們對比發(fā)現(xiàn) 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()
]
}
}
修改插件選項的參數(shù)你將需要熟悉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 中通過 相對路徑 引用的資源會經(jīng)過 webpack 處理杖狼，放置在 public 文件夾的資源可以通過絕對路徑引用炼蛤，這些資源將會被復制，而不經(jīng)過 webpack 處理蝶涩。
小提示：圖片最好使用相對路徑經(jīng)過 webpack 處理理朋，這樣可以避免很多因為修改網(wǎng)站根目錄導致圖片404的問題。
六绿聘、新增功能
1. 對 TypeScript 的支持
在 3.0 版本中嗽上，選擇啟用 TypeScript 語法后，vue 組件的書寫格式有特定的規(guī)范熄攘。
示例代碼：
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 生態(tài)中的工具基礎標準化。它確保了各種構建工具能夠基于智能的默認配置即可平衡銜接己儒，這樣你可以專注在編寫你的應用上崎岂，而不必花好幾天時間去糾結配置的問題。與此同時闪湾，它也為每個工具提供了調整配置的靈活性冲甘。
