摘要：借助，我們通過(guò)非常簡(jiǎn)單的問(wèn)答形式，方便地初始化一個(gè)工程，完全不需要擔(dān)心繁復(fù)的配置等等。簡(jiǎn)單來(lái)說(shuō)，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運(yùn)行的模板，就能夠通過(guò)進(jìn)行工程的初始化。

相信對(duì)于大部分使用過(guò)VueJS的同學(xué)來(lái)說(shuō)，vue-cli是他們非常熟悉的一個(gè)工具。借助vue-cli，我們通過(guò)非常簡(jiǎn)單的問(wèn)答形式，方便地初始化一個(gè)vue工程，完全不需要擔(dān)心繁復(fù)的webpack、eslint配置等等。

但是，仍然有許多同學(xué)沒(méi)有搞清楚vue-cli和vue工程之間的關(guān)系，導(dǎo)致沒(méi)有充分發(fā)揮vue-cli的功能。在這篇文章中，我將從底層原理開(kāi)始并結(jié)合幾個(gè)例子，告訴大家vue-cli還能這樣用。

引用vue-cli官方文檔的一句話：

A simple CLI for scaffolding Vue.js projects.
一個(gè)簡(jiǎn)單的Vue.js工程命令行腳手架工具。

在全局安裝vue-cli之后，就可以通過(guò)一條命令初始化我們的vue工程：

vue init  

接下來(lái)vue-cli就會(huì)按照這個(gè)模板內(nèi)部的設(shè)置，拋出幾個(gè)問(wèn)答選項(xiàng)。在回答完問(wèn)答選項(xiàng)以后，我們的vue工程目錄就已經(jīng)生成好了，接下來(lái)只要把依賴安裝完，直接就可以跑起來(lái)，是不是非常方便呢？

接下來(lái)，我們就要看看，這一條命令的背后，究竟發(fā)生了一些什么事。

從官方文檔可以知道，vue-cli使用了download-git-repo這個(gè)工具去下載遠(yuǎn)端git倉(cāng)庫(kù)里面的工程，如果加上了--clone參數(shù)，則會(huì)在內(nèi)部運(yùn)行git clone，通過(guò)克隆的方式把遠(yuǎn)端git倉(cāng)庫(kù)拉取到本地。明白這一點(diǎn)至關(guān)重要：

vue-cli并非從無(wú)到有地憑空生成一個(gè)項(xiàng)目，而是通過(guò)下載/拉取已有的工程到本地，完成生成項(xiàng)目的工作。

而這個(gè)“已有的工程”，就是所謂的“模板（template）”。

當(dāng)然，vue-cli可不只是把模板拉取到本地這么簡(jiǎn)單，它還允許我們通過(guò)問(wèn)答的形式對(duì)模板進(jìn)行個(gè)性化配置，這個(gè)又是如何做到的呢？

vue-cli使用了inquirer.js實(shí)現(xiàn)了“問(wèn)答環(huán)節(jié)”，簡(jiǎn)單來(lái)說(shuō)是這樣子的：

// 準(zhǔn)備幾個(gè)問(wèn)題

const questions = [
  {
    type: "input",
    name: "name",
    message: "What"s your name?"
  },
  {
    type: "input",
    name: "age",
    message: "How old are you?",
  }
]

然后把這段問(wèn)題傳給inquirer.js就可以了：

inquirer.prompt(questions).then(({ name, age }) => {
  console.log(`My name is ${name}, and I"m ${age} years old`)
})

在運(yùn)行的時(shí)候，vue-cli會(huì)在命令行里面把What"s your name?和How old are you?這兩個(gè)問(wèn)題相繼拋出，獲取用戶輸入，把輸入賦值給name和age變量，這樣就能夠獲取用戶的輸入信息了。接著我們引出下一個(gè)問(wèn)題，這些用戶輸入，是如何跟模板的自定義關(guān)聯(lián)起來(lái)的呢？

我們打開(kāi)一個(gè)vue-cli的模板，比如webpack-simple里面的README.md，它長(zhǎng)這樣：

# {{ name }}

> {{ description }}

上面使用雙括號(hào)包裹起來(lái)的，最終會(huì)根據(jù)用戶的輸入而更改為具體的內(nèi)容。是不是覺(jué)得這種寫法很熟悉？其實(shí)就是Handlebars的模板語(yǔ)法。

以這個(gè)README.md文件為例，在vue-cli運(yùn)行的過(guò)程中，會(huì)首先讀取文件的內(nèi)容放在內(nèi)存，然后通過(guò)inquirer.js獲取用戶輸入，把輸入的值替換到文件內(nèi)容里面，最后通過(guò)另外一個(gè)名叫Metalsmith的工具，把替換好的內(nèi)容輸出為文件，也就生成了具有個(gè)性化內(nèi)容的README.md文件了。

整個(gè)流程并不復(fù)雜，在明白這些原理后，我們就能更深入地使用vue-cli了。

雖然這么類比不太準(zhǔn)確，但我想大家也應(yīng)該能明白我的意思。

簡(jiǎn)單來(lái)說(shuō)，就是vue-cli不僅僅能初始化vue工程，理論上能夠初始化一切工程，包括react，angular等等等等，只要你有一份能夠運(yùn)行的模板，就能夠通過(guò)vue-cli進(jìn)行工程的初始化。

在討論區(qū)有許多類似的問(wèn)題：

“vue-cli當(dāng)中如何配置sass？”

“vue-cli中如何修改devServer的端口？”

“vue-cli中發(fā)現(xiàn)項(xiàng)目跑不起來(lái)”

……

vue-cli說(shuō)：“這鍋我不背?！?/p>

是的，所遇到的問(wèn)題都不是vue-cli的問(wèn)題，而是相關(guān)模板的問(wèn)題。那么應(yīng)該如何寫一份合格的模板呢？下面我們一起來(lái)研究一下。

參考官方文檔，也許還是不能理解到底應(yīng)該怎么寫，那么我們可以直接參考官方例子webpack-simple，看看它到底是怎么寫的。

首先可以看到目錄結(jié)構(gòu)：

著實(shí)是非常簡(jiǎn)單，其中meta.json就是向用戶拋出的問(wèn)答題，/template目錄則是真正的模板內(nèi)容。首先我們來(lái)看看meta.json都寫了些啥：

{
  "prompts": {
    "name": {
      "type": "string",
      "required": true,
      "label": "Project name"
    },
    "description": {
      "type": "string",
      "required": true,
      "label": "Project description",
      "default": "A Vue.js project"
    },
    "author": {
      "type": "string",
      "label": "Author"
    },
    "sass": {
       "type": "confirm",
       "message": "Use sass?",
       "default": false
    }
  },
  "completeMessage": "{{#inPlace}}To get started:

  npm install
  npm run dev.{{else}}To get started:

  cd {{destDirName}}
  npm install
  npm run dev.{{/inPlace}}"
}

可以看到，它一共向用戶提了4個(gè)問(wèn)題：

Project name

Project description

Author

Use sass?

接著，我們打開(kāi)/template目錄，看看它長(zhǎng)什么樣：

這就是終將被生成的工程目錄。打開(kāi)里面的package.json：

{
  "name": "{{ name }}",
  "description": "{{ description }}",
  "version": "1.0.0",
  "author": "{{ author }}",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.4.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    {{#sass}}
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    {{/sass}}
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

結(jié)合前文原理里面的內(nèi)容，也不難理解這個(gè)package.json里面雙括號(hào)的含義了。

看到這里，是不是已經(jīng)躍躍欲試，想要寫一份屬于自己的模板呢？又或者想要打造一款屬于自己的命令行腳手架工具？原理都是很簡(jiǎn)單的，只要按照想法一步步實(shí)現(xiàn)即可。

其實(shí)在去年早些時(shí)候，已經(jīng)寫了兩篇腳手架相關(guān)的文章：

《教你從零開(kāi)始搭建一款前端腳手架工具》

好用的項(xiàng)目初始化工具SCION升級(jí)啦！

但是發(fā)現(xiàn)仍然有許多同學(xué)對(duì)于vue-cli的理解有些偏差，于是寫下這篇文章，聊一聊自己的理解。

By the way，我將會(huì)在11月16日晚上8點(diǎn)，在Segmentfault開(kāi)展live講座，主題是《【前端工程化】：玩轉(zhuǎn)Webpack配置》，歡迎感興趣的同學(xué)報(bào)名參加哦，保證精心準(zhǔn)備，干貨滿滿！

報(bào)名鏈接：https://segmentfault.com/l/15...

期待和大家的分享交流~