摘要：借助，我們通過非常簡單的問答形式，方便地初始化一個工程，完全不需要擔心繁復的配置等等。簡單來說，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運行的模板，就能夠通過進行工程的初始化。

相信對于大部分使用過VueJS的同學來說，vue-cli是他們非常熟悉的一個工具。借助vue-cli，我們通過非常簡單的問答形式，方便地初始化一個vue工程，完全不需要擔心繁復的webpack、eslint配置等等。

但是，仍然有許多同學沒有搞清楚vue-cli和vue工程之間的關系，導致沒有充分發揮vue-cli的功能。在這篇文章中，我將從底層原理開始并結合幾個例子，告訴大家vue-cli還能這樣用。

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

A simple CLI for scaffolding Vue.js projects.
一個簡單的Vue.js工程命令行腳手架工具。

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

vue init  

接下來vue-cli就會按照這個模板內部的設置，拋出幾個問答選項。在回答完問答選項以后，我們的vue工程目錄就已經生成好了，接下來只要把依賴安裝完，直接就可以跑起來，是不是非常方便呢？

接下來，我們就要看看，這一條命令的背后，究竟發生了一些什么事。

從官方文檔可以知道，vue-cli使用了download-git-repo這個工具去下載遠端git倉庫里面的工程，如果加上了--clone參數，則會在內部運行git clone，通過克隆的方式把遠端git倉庫拉取到本地。明白這一點至關重要：

vue-cli并非從無到有地憑空生成一個項目，而是通過下載/拉取已有的工程到本地，完成生成項目的工作。

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

當然，vue-cli可不只是把模板拉取到本地這么簡單，它還允許我們通過問答的形式對模板進行個性化配置，這個又是如何做到的呢？

vue-cli使用了inquirer.js實現了“問答環節”，簡單來說是這樣子的：

// 準備幾個問題

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

然后把這段問題傳給inquirer.js就可以了：

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

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

我們打開一個vue-cli的模板，比如webpack-simple里面的README.md，它長這樣：

# {{ name }}

> {{ description }}

上面使用雙括號包裹起來的，最終會根據用戶的輸入而更改為具體的內容。是不是覺得這種寫法很熟悉？其實就是Handlebars的模板語法。

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

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

雖然這么類比不太準確，但我想大家也應該能明白我的意思。

簡單來說，就是vue-cli不僅僅能初始化vue工程，理論上能夠初始化一切工程，包括react，angular等等等等，只要你有一份能夠運行的模板，就能夠通過vue-cli進行工程的初始化。

在討論區有許多類似的問題：

“vue-cli當中如何配置sass？”

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

“vue-cli中發現項目跑不起來”

……

vue-cli說：“這鍋我不背。”

是的，所遇到的問題都不是vue-cli的問題，而是相關模板的問題。那么應該如何寫一份合格的模板呢？下面我們一起來研究一下。

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

首先可以看到目錄結構：

著實是非常簡單，其中meta.json就是向用戶拋出的問答題，/template目錄則是真正的模板內容。首先我們來看看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個問題：

Project name

Project description

Author

Use sass?

接著，我們打開/template目錄，看看它長什么樣：

這就是終將被生成的工程目錄。打開里面的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"
  }
}

結合前文原理里面的內容，也不難理解這個package.json里面雙括號的含義了。

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

其實在去年早些時候，已經寫了兩篇腳手架相關的文章：

《教你從零開始搭建一款前端腳手架工具》

好用的項目初始化工具SCION升級啦！

但是發現仍然有許多同學對于vue-cli的理解有些偏差，于是寫下這篇文章，聊一聊自己的理解。

By the way，我將會在11月16日晚上8點，在Segmentfault開展live講座，主題是《【前端工程化】：玩轉Webpack配置》，歡迎感興趣的同學報名參加哦，保證精心準備，干貨滿滿！

報名鏈接：https://segmentfault.com/l/15...

期待和大家的分享交流~