深刻認識 vue-cli：能作的不單單是初始化 vue 工程

時間 2019-11-09

標籤深刻認識 vue cli 不單單是初始化工程简体版

原文原文鏈接

寫於 2017.10.20javascript

相信對於大部分使用過VueJS的同窗來講，vue-cli是他們很是熟悉的一個工具。藉助vue-cli，咱們經過很是簡單的問答形式，方便地初始化一個vue工程，徹底不須要擔憂繁複的webpack、eslint配置等等。css

可是，仍然有許多同窗沒有搞清楚vue-cli和vue工程之間的關係，致使沒有充分發揮vue-cli的功能。在這篇文章中，我將從底層原理開始並結合幾個例子，告訴你們vue-cli還能這樣用。前端

什麼是vue-cli

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

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

在全局安裝vue-cli以後，就能夠經過一條命令初始化咱們的vue工程：node

vue init <template-name> <project-name>
複製代碼

接下來vue-cli就會按照這個<template-name>模板內部的設置，拋出幾個問答選項。在回答完問答選項之後，咱們的vue工程目錄就已經生成好了，接下來只要把依賴安裝完，直接就能夠跑起來，是否是很是方便呢？react

接下來，咱們就要看看，這一條命令的背後，究竟發生了一些什麼事。webpack

vue-cli初始化項目的原理

從官方文檔能夠知道，vue-cli使用了download-git-repo這個工具去下載遠端git倉庫裏面的工程，若是加上了--clone參數，則會在內部運行git clone，經過克隆的方式把遠端git倉庫拉取到本地。明白這一點相當重要：git

vue-cli並不是從無到有地憑空生成一個項目，而是經過下載/拉取已有的工程到本地，完成生成項目的工做。github

而這個「已有的工程」，就是所謂的「模板（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了。

Javascript與Java，Vue-cli與Vue

雖然這麼類比不太準確，但我想你們也應該能明白個人意思。

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

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

「vue-cli當中如何配置sass？」
「vue-cli中如何修改devServer的端口？」
「vue-cli中發現項目跑不起來」
……

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:\n\n npm install\n npm run dev.{{else}}To get started:\n\n cd {{destDirName}}\n npm install\n 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裏面雙括號的含義了。

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