錯過了Vue CLI2，還要錯過Vue CLI3?

在Vue CLI出現之前，你可能要花費好幾天的時間搭建項目的開發環境，如果你事先不了解webpack，你可能會又花費大把的時間熟悉webpack。就這樣，一周過去了，你的項目還沒有真正啟動起來。

為了讓開發者從糾結配置中解放出來，專注于撰寫應用程式。Vue CLI也就是以而産生。它不僅確定了各種建構工具能夠基于智能的預設配置即可平穩銜接，還提供了配置調整的靈活性。

Vue CLI到目前為止經曆了兩個大版本，CLI 2 和 CLI 3。很多人可能會好奇從 CLI 2更新到CLI 3會有哪些新的改變，接下來就一邊回顧CLI 2，一邊為大家解讀CLI 3的新特性。

CLI 2和CLI 3第一個差別是npm包的包名，CLI 3并沒有沿用CLI 2的vue-cli，而是另起為@vue/cli。建立項目方面也發生了變化，CLI 2 可以選擇根據模闆初始化項目，而CLI 3并未重新開發模闆，如果開發者想要像CLI 2一樣使用模闆初始化項目，可全局安裝一個橋接工具@vue/cli-init。

1、CLI 2 全局安裝并建立項目

npm install -g vue-cli # 或者 npm install -g [email protected] // 指定安裝某一版本 vue init <template-name> <project-name> # 例如：vue init webpack vue-test

注意：這裡的CLI 2是2.9.6。

<template-name>：表示模闆名稱，可以通過vue list檢視可用的模闆，在這裡官方提供了6種模闆，分别為：

browserify——一個全面的Browserify + vueify 的模闆，運作起來帶有熱重載，儲存時 lint 校驗，單元測試。

browserify-simple——一個簡單Browserify + vueify的模闆，不包含其他功能，讓你快速的搭建vue的開發環境。

pwa——一個基于webpack模闆的漸進式的網頁應用程式模闆。

simple——一個最簡單的單頁應用模闆。

webpack——一個全面的webpack + vue-loader的模闆，運作起來帶有熱重載，儲存時 lint 校驗和CSS擴充。

webpack-simple——一個簡單webpack + vue-loader的模闆，能讓你快速搭建一個vue的開發環境。

圖1 官方提供的6種模闆

初始化過程中會确認項目的項目名、作者等資訊，大家可根據需求自行修改。

2、CLI 3全局安裝并建立一個項目

當我們用CLI 3的方式建立項目，輸入vue create vue-3.0-demo指令後，你會發現在建立項目的路上總是有位“記者大哥”橫路攔截，問你這問你那，你還必須做出選擇。

故事就從你輸入vue create vue-3.0-demo後悄悄開始了...

記者大哥：“歡迎進入CLI 3的世界，首先你得選取一個 preset。選擇預設的設定可以快速建立一個新項目的原型，而手動設定則提供了更多的選擇。你是選擇預設配置，還是手動選擇特性呢？”

你：（心裡活動：“來都來了，為何不看看記者大哥到底搞什麼鬼”）“我選擇了手動選擇屬性”

圖2 手動選取特性

你：什麼鬼？還給我來個多選題！首先Babel是必要的，不然拿什麼來轉換ES6文法，TypeScript？不會，略過。漸進式的程式應用，暫時也不涉及這個。Router勾上，作為一個移動M站，得有人來管理路由呀。Vuex一個狀态管理器，後期要用再加上吧，反正也跑不了。css 預處理器，習慣使用Less，也加一。Linter / Formatter也加一，作為一個團隊，沒有人統一代碼風格可不行。最後兩個分别是單元測試和端對端測試，這裡我就不加上了，沒用過，期待今後有大神分享。

選擇完特性後，你以為就結束了，沒想到，一步選錯步步要你選。

對于css預處理器方面，你毅然決然選擇了Less；

但linter / formatter 配置，你懵逼了。這都是什麼？？記者大哥介紹了一下：

ESLint 是一個文法規則和代碼風格的檢查工具，可以檢測出你代碼中潛在的問題，可以保證寫出文法正确和風格統一的代碼。

圖3 選擇linter配置

ESLint with error prevention only——隻檢測錯誤。

ESLint + Airbnb config——獨角獸公司的Airbnb，有人評價說“這是一份最合理的JavaScript編碼規範”，它幾乎涵蓋了JavaScript的各個方面。

ESLint + Standard config——standardJs一份強大的JavaScript編碼規範，自帶linter和自動代碼糾正。沒有配置。自動格式化代碼。可以在編碼早期發現規範問題和低級錯誤。

ESLint + Prettier—— Prettier 作為代碼格式化工具，能夠統一整個團隊的代碼風格。

等他介紹完，你心裡大概有點譜了，這裡你選擇了 ESLint + Standard config。

lint有兩種檢查時機，一是使用者儲存檔案的時候，二是使用者送出檔案到git的時候。你就選了Lint on save，有錯及時解決嘛。

終于“記者大哥”告訴你接下來這個問題是最後一個問題咯。

記者大哥：你是喜歡把Babel、ESLint等配置資訊全放在package.json檔案裡呢，還是單獨檔案管理？

你：一個一個檔案比較好，根據檔案名就知道這是誰的配置，友善維護。

記者大哥：那你是否想把今天你手動選擇的preset儲存為未來項目的preset呢？

你：

說好的最後一個呢！！

......儲存！

happy end~~

溫馨提示：如果你是用window，在進行建立項目的時候，最好使用cmd，在cmd裡你可以通過箭頭上下選擇和空格選中。如果你用git bash 可能會出現箭頭和空格都沒有請選擇和選中作用。

這裡通過一個漫長的對話我們自定義的一個preset，此時如果你需要建立新工程，這時候你就會發現多了一個preset，就是最初你自己設定的。你可以選擇自己之前儲存preset的，也可以再次開啟“采訪模式”。

圖4 新添的preset

圖5 vue cli 2.9.6項目結構

對于CLI 2這個項目結構，主要的也是最重要的在于bulid和config者兩個目錄。bulid是項目建構的相關代碼，config是項目開發環境配置。

接下來就先從webpack.base.conf.js開始依次介紹build和config兩個目錄下的相關功能。

webpack.base.conf.js是webpack的基礎配置，是dev和prod的公共配置檔案。

path——該子產品提供了一些用于處理檔案路徑的小工具

utils——給整個CLI提供方法

config——開發環境的配置

vueLoaderConfig——分析是否是生産環境，然後将根據不同的環境來加載配置功能

在這個檔案裡一共實作了兩個方法。一是合并path路徑的，另一個是建立Eslint的Rules。而剩餘部分就是webpack的基礎配置，這裡簡化了webpack結構，簡化的結果其實就是webpack的一個骨架，如果在配置上遇到問題，可去webpack查證。

關于path有興趣的可前往node學習，接下來重點介紹下utils.js，config和vue-loader.conf。

utils.js檔案中總共實作了4個方法：assetsPath、cssLoaders、styleLoaders、createNotifierCallback。

assetsPath——傳回不同環境下的static目錄位置

cssLoaders——為不同的css預處理器提供一個統一的生成方式

styleLoaders——為那些獨立的style檔案建立加載器配置

createNotifierCallback——以類似浏覽器的通知的形式展示資訊

config關鍵檔案是index.js。這個檔案是開發環境和生産環境的基本配置。在這個檔案裡開發者可在dev設定開發環境的靜态路徑、本地伺服器配置項、Eslint、SourceMaps和代理，也可在build設定生産環境是否開啟gzip壓縮，以及壓縮字尾名的設定等。

這個檔案的内容相對比較少。首先，vue檔案中的css loader将在生産環境下把css檔案抽取到一個獨立的檔案中；其次是根據不同的環境，引入不同的source map配置檔案；最後設定是否開啟緩存破壞。

'use strict' const utils = require('./utils') const config = require('../config') const isProduction = process.env.NODE_ENV === 'production' const sourceMapEnabled = isProduction   ? config.build.productionSourceMap   : config.dev.cssSourceMap module.exports = {   loaders: utils.cssLoaders({     sourceMap: sourceMapEnabled,     extract: isProduction   }),   cssSourceMap: sourceMapEnabled,   cacheBusting: config.dev.cacheBusting,   transformToRequire: {     video: ['src', 'poster'],     source: 'src',     img: 'src',     image: 'xlink:href'   } }

關于webpack公共配置講完了，接下來我們就一起學習下在dev和prod環境各自的配置吧。

這個檔案引入了webpack-merge，意在将公共配置檔案和dev配置合并。從代碼裡我們可以發現，dev環境又新增了一些配置項。

給獨立的style檔案添加了sourceMap功能，有了它，出錯的時候，除錯工具将直接顯示原始代碼，而不是轉換後的代碼。

引入devtool。

配置devServer，包括熱部署、代理、啟動程式的時候自動在浏覽器打開首頁面等。

新增一些插件，包括熱替換、webpack.NamedModulesPlugin在熱加載時直接傳回更新檔案名、html-webpack-plugin生成html檔案等。

最後一個函數是為了確定啟動程式時，如果端口被占用時，會通過portfinder來釋出新的端口。

... const devWebpackConfig = merge(baseWebpackConfig, {   module: { ... },   devtool: config.dev.devtool,   devServer: { ... },   plugins: [ ... ] }) module.exports = new Promise((resolve, reject) => { ... })

相比 webpack.dev.conf.js，這個檔案多引入了幾個依賴，主要是為了壓縮CSS和JS。在檔案配置上多了一個output，将js檔案打包成多個chuck，用hash值命名，來解決緩存政策。

到這裡CLI 2的整個配置也就接近尾聲了。剩下的還有check-version.js和bulid.js兩個檔案。

這個檔案主要是用來檢測目前環境中的node和npm版本和我們需要的是否一緻的。

這個檔案剛開始通過check-versions判斷目前的node和npm版本号，如果現有的npm或者node的版本比定義的版本低，則生成一段警告。接下來，先删除打包目标目錄下的檔案，再進行打包，直至打包完成。

我們走馬觀花的學習了CLI 2的配置，估計大家也都累了。那接下來就來一段采訪吧~~期待不，哈哈。

圖6 CLI 3項目結構

從CLI 3的整個項目結構我們可以發現，這個結構很簡單，沒有相關的配置檔案或複雜的目錄結構。CLI 3僅生成建構應用程式所需的檔案，讓使用者不用關心這些工具的具體配置，進而降低了工具的使用難度。

其實通過閱讀CLI 3的官方文檔，你可能已經知道，官方内置了一個CLI服務（@vue/cli-service），作為一個開發環境的依賴，局部安裝在@vue/cli建立的項目中。如果你真想修改webpack的相關配置，可在項目的根目錄下（和package.json同級）建立一個vue.config.js配置檔案，這個檔案一旦存在就會被@vue/cli-service自動加載。也可直接使用package.json中的vue字段。

一個沒有好奇心的程式猿，不是一個更好的程式猿。

如果你已經滿足于官方的介紹，那也就到此結束漫長的閱讀之旅啦（偷偷告訴你後面還有新特性的精彩内容）。如果你也像我一樣，充滿了好奇心，就跟我再去探索一番。

從CLI 2到CLI 3，初期可能沒有官方文檔。如果你真想探個究竟，可以從啟動項目入手。

CLI 2啟動方式是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js這裡用webpack-dev-server搭一個服務。

--inline：啟動inline模式來自動重新整理頁面

--progress：顯示打包的進度

--config build/webpack.dev.conf.js：指定要用的是哪個配置檔案

CLI 3啟動方式是vue-cli-service serve

vue-cli-service就是CLI服務，你可全局搜尋一下，位于node_modules\@vue\cli-service\bin

#!/usr/bin/env node const semver = require('semver') const { error } = require('@vue/cli-shared-utils') const requiredVersion = require('../package.json').engines.node ... const Service = require('../lib/Service') const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd()) const rawArgv = process.argv.slice(2) const args = require('minimist')(rawArgv) const command = args._[0] service.run(command, args, rawArgv).catch(err => {   error(err)   process.exit(1) })

這個檔案首先是判斷了目前node的版本和vue-cli-service要求的版本是否一緻，如果版本太低就得更新node版本。

緊接着就起了個服務，這個服務是位于lib/Service。

... loadUserOptions () {     // vue.config.js     let fileConfig, pkgConfig, resolved, resovledFrom     const configPath = (       process.env.VUE_CLI_SERVICE_CONFIG_PATH ||       path.resolve(this.context, 'vue.config.js')     )     ...     // package.vue     pkgConfig = this.pkg.vue     ...     if (fileConfig) {       if (pkgConfig) {         ...       }       resolved = fileConfig       resovledFrom = 'vue.config.js'     } else if (pkgConfig) {       resolved = pkgConfig       resovledFrom = '"vue" field in package.json'     } else {       resolved = this.inlineOptions || {}       resovledFrom = 'inline options'     }     ...     return resolved   } } ...

在loadUserOptions這個函數中，你可以看到官方提到的vue.config.js。

這個函數主要是加載使用者的配置。如果vue.config.js和package.json的vue字段同時存在，會忽略package.json的vue字段配置，而選取vue.config.js的配置。

這裡粗略介紹了何處加載了  vue.confg.js  檔案，有興趣可以繼續深究。經過安裝CLI、建立項目到整個項目結構介紹，我們可以大緻了解了兩者的差別。接下來大家一起圍觀一下CLI 3給我們帶來的哪些新特性吧~~~

據我所知，在CLI 3之前是沒有CLI插件這個概念的，人們在開發Vue項目時，若是需要實作功能都是引用npm的相關包。CLI 3的出現，帶來了CLI插件這個概念，也帶來了統一的命名方式：@vue/cli-plugin-（内建插件）/ vue-cli-plugin-（社群插件）開頭。

圖7 CLI 3出現前包名

圖8 CLI插件

有時候你想快速建立一個原型，不需要添加一大堆樣闆。Vue CLI就提供了一個運作原型的開發伺服器。

要想使用這個開發伺服器，前提是安裝@vue/cli-service-global

你可以用IDE建立.vue檔案，并添加vue代碼。如果你對指令行掌握良好，也能輕松建立。

然後将HelloWorld.vue 修改為标準的vue檔案結構就行。

緊接着你就可以運作vue serve src/views/HelloWorld.vue 就能看效果啦~

圖9 快速原型開發

如果你曾經是一位React的忠實使用者，或許使用過create-react-app（react的腳手架），那你對eject的了解可能就很深刻了。可惜小女不才，早期與React隻有一面之緣，也就沒此機會接觸create-react-app。為了了解eject到底是何物，我檢視了react的相關文檔，終于明白了。

在react中，使用CRA（ create-react-app簡稱）建立完項目，我們可以在package.json看到這裡一個script指令。

執行完npm run eject會将封裝在CRA裡的配置全部反編譯到目前項目，換句話就是把之前好不容易藏好了config檔案暴露出來了，使用者也就擷取到了控制權，想怎麼改随你。這樣react-scripts就以檔案的形式存在于項目中，就無法更新啦。

好在CLI 3并沒有像CRA一樣，開發者你要是想自己修改配置，也是可以的，我不需要你eject，你想改就去vue.config.js裡改吧。

如果你想看看預設的webpack配置，可執行vue inspect檢視，預設情況下，會将配置輸出到控制台，你也可以将結果指向一個檔案，例如：vue inspect > webpack.config.js。

新特性到此就介紹完畢了。