vue-cli 是 vue 官方團(tuán)隊(duì)推出的一款快速開發(fā) vue 項(xiàng)目的構(gòu)建工具，具有開箱即用并且提供簡(jiǎn)潔的自定義配置等功能。vue-cli 從 2.0 到 3.0 的升級(jí)有非常多的變化，這篇文章作為一個(gè)對(duì)比 2.0 升級(jí)功能的導(dǎo)讀，讓你快讀了解 3.0 更新內(nèi)容，陸續(xù)更新。

一、創(chuàng)建項(xiàng)目

創(chuàng)建項(xiàng)目命令

vue create my-project

3.0版本包括 默認(rèn)預(yù)設(shè)配置 和 用戶自定義設(shè)置

自定義功能配置包括以下功能：

• TypeScript
• Progressive Web App (PWA) Support
• Router
• Vuex
• CSS Pre-processors
• Linter/Formatter
• Unit Testing
• E2E Testing

可以注意到 3.0 版本直接新加入了 TypeScript 以及 PWA 的支持。

1. 在選擇 CSS 預(yù)處理器后會(huì)提示選擇哪一種預(yù)處理器：

• Scss/Sass
• Less
• Stylus

2. 以及 eslint 規(guī)范的選擇：

• ESLint with error prevention only
• ESLint + Airbnb config
• ESLint + Standard config
• ESLint + Prettier

3. 最后選擇 Babel，PostCSS，ESLint 等自定義配置的存放位置：

• In dedicated config files
• In package.json

選擇好后，可以把以上配置存儲(chǔ)為預(yù)設(shè)值，以后通過 vue-cli 創(chuàng)建其他項(xiàng)目將都采用剛才的配置。

二、項(xiàng)目目錄結(jié)構(gòu)

我們對(duì)比發(fā)現(xiàn) vue-cli 3.0 默認(rèn)項(xiàng)目目錄相比 2.0 來說精簡(jiǎn)了很多。

• 移除了配置文件目錄， config 和 build 文件夾。
• 移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動(dòng)到 public 中。
• 在 src 文件夾中新增了 views 文件夾，用于分類 視圖組件 和 公共組件。

三、移除了配置文件目錄后如何自定義配置

從 3.0 版本開始，在項(xiàng)目的根目錄放置一個(gè) vue.config.js 文件，可以配置該項(xiàng)目的很多方面。

vue.config.js 應(yīng)該導(dǎo)出一個(gè)對(duì)象，例如：

module.exports = {

baseUrl: '/',

outputDir: 'dist',

lintOnSave: true,

compiler: false,

// 調(diào)整內(nèi)部的 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 => {}

}

....

}

調(diào)整 webpack 配置最簡(jiǎn)單的方式就是在vue.config.js中的configureWebpack選項(xiàng)提供一個(gè)對(duì)象，該對(duì)象將會(huì)被webpack-merge合并入最終的 webpack 配置。

示例代碼：配置 webpack 新增一個(gè)插件。

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

修改插件選項(xiàng)的參數(shù)你將需要熟悉webpack-chain的 API，并閱讀一些源碼以便了解如何權(quán)衡這個(gè)選項(xiàng)的全部配置項(xiàng)，但是它給了你比直接修改 webpack 配置中的值更靈活且安全的方式。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* new args to pass to html-webpack-plugin's constructor */]
      })
  }
}

注意：當(dāng)我們更改一個(gè) webpack 配置的時(shí)候，可以通過vue inspect > output.js輸出完整的配置清單，注意它輸出的并不是一個(gè)有效的 webpack 配置文件，而是一個(gè)用于審查的被序列化的格式。

四、ESLint、Babel、browserslist 相關(guān)配置：

• Babel 可以通過.babelrc 或 package.json 中的
  babel 字段進(jìn)行配置。
• ESLint 可以通過.eslintrc 或 package.json 中的 eslintConfig 字段進(jìn)行配置。
• package.json 中的 browserslist 字段指定了該項(xiàng)目的目標(biāo)瀏覽器支持范圍。

五、關(guān)于 public 目錄的調(diào)整

vue 約定public/index.html作為入口模板會(huì)通過html-webpack-plugin插件處理。在構(gòu)建過程中，資源鏈接將會(huì)自動(dòng)注入其中。除此之外，vue-cli 也自動(dòng)注入資源提示（preload/prefetch），在啟用 PWA 插件時(shí)注入manifest/icon/鏈接，并引入(inlines) webpack runtime / chunk manifest清單已獲得最佳性能。

在 JavaScript 或者 SCSS 中通過 相對(duì)路徑 引用的資源會(huì)經(jīng)過 webpack 處理，放置在 public 文件夾的資源可以通過絕對(duì)路徑引用，這些資源將會(huì)被復(fù)制，而不經(jīng)過 webpack 處理。

小提示：圖片最好使用相對(duì)路徑經(jīng)過 webpack 處理，這樣可以避免很多因?yàn)樾薷木W(wǎng)站根目錄導(dǎo)致圖片404的問題。

六、新增功能

1. 對(duì) 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) { }
}

以上代碼相當(dāng)于

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
  }
 }
})

更多詳細(xì)內(nèi)容請(qǐng)關(guān)注 這里 。

2. 對(duì) PWA 的支持

當(dāng)我們選擇啟用 PWA 功能時(shí)，在打包生成代碼時(shí)會(huì)默認(rèn)生成 service-worker.js 和 manifest.json 相關(guān)文件。如果你不了解 PWA，點(diǎn)擊 這里 查看。

image

注意：在 manifest.json 生成的圖標(biāo)信息，可以在 public/img 目錄下替換。

默認(rèn)情況 service-worker 采用的是 precache，可以通過配置 pwa.workboxPluginMode 自定義緩存策略。點(diǎn)擊 詳情 。

配置示例

// Inside vue.config.js
module.exports = {
 // ...其它 vue-cli 插件選項(xiàng)...
 pwa: {
  workboxPluginMode: 'InjectManifest',
  workboxOptions: {
   // swSrc 中 InjectManifest 模式下是必填的。
   swSrc: 'dev/sw.js',
   // ...其它 Workbox 選項(xiàng)...
  },
 },
};

總結(jié)

vue-cli 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平衡銜接，這樣你可以專注在編寫你的應(yīng)用上，而不必花好幾天時(shí)間去糾結(jié)配置的問題。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性。