10分鐘搭建屬於本身的 Vue CLI3 項目模板

0x01 契機

Vue CLI3 出來已經很長時間了，一直想研究它的插件系統卻沒有時間~~（實際上是懶），恰好最近須要統一一下項目組的規範（藉口）~~，因而就有了契機。

先瞅一眼文檔: CLI3插件和Preset

而後就教你怎麼徹底定製化一套 前端項目模板，媽媽不再用擔憂我每次複製粘貼啦~

特別說明：這種 preset 不須要發佈到 npm，支持 github，gitlab 及任何 git repo，甚至能夠直接本地引入哦~

0x02 兩個名詞

插件

顧名思義，就是插件啦

1. Vue CLI 使用了一套基於插件的架構
2. 基於插件的架構使得 Vue CLI 靈活且可擴展

Preset

能夠翻譯爲 預設

• 一個包含建立新項目所需預約義選項和插件的 JSON 對象
• 還能夠理解爲一套預置的項目模板，也就是本文要講的。

使用vue create 建立過項目的小夥伴應該都記得，在建立完成後 CLI 會提示是否保存爲一個 preset，這裏第一條指的就是要保存的那個對象。若是你保存過，下面的命令就能看到以前保存的 preset。

cat ~/.vuerc
複製代碼

每一個 preset.json 大概是這麼個格式:

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}
複製代碼

0x03 二者區別

插件

一個插件包含如下三個部分：

1. Service 插件
2. generator 文件 (可選)
3. prompts 文件 (可選)

Preset

一個 Preset 項目包含如下三個部分

1. preset.json
2. generator 文件 (可選)
3. prompts 文件 (可選)

---

能夠看到他們兩個的區別就是插件必須有一個 Service 插件（這個東西比本文講的插件範疇要窄），而 Preset 必須包含一個 preset.json

0x04 核心概念

因爲本文主要講的是 Preset，因此剩下的核心概念看文檔就好哈: 核心概念

Prompts

本質上是一個對話配置文件，vue 內置插件 和 第三方插件 的這個文件的寫法是不同的。咱們只要記得：

它是一個 Inquirer.js 的 問題 的數組

示例以下：

// 注意這段代碼下面會提到
module.exports = [
  {
    type: 'list', // 即類型爲 選擇項
    name: 'module', // 名稱，做爲下面 generator 函數 options 的鍵
    message: '請選擇你要生成的模塊', // 提示語
    choices: [
      { name: 'Module1', value: 'module1' },
      { name: 'Module2', value: 'module2' },
      { name: 'Module3', value: 'module3' }
    ],
    default: 'module0',
  },
  {
    type: 'input', // 類型爲 輸入項
    name: 'moduleName',
    message: '請輸入模塊名稱',
    default: 'myModule'
  }
]
複製代碼

固然用不到的話直接給空數組就行哈。

執行的效果大概就是這樣：

Generator

能夠叫它生成器，它導出一個函數，該函數接收三個參數

1. api : 一個 GeneratorAPI 實例
2. options: 能夠先簡單理解爲 prompts 問題數組的用戶輸入 組合成的選項對象
3. rootOptions: 整個 preset.json 對象

// 這些代碼本質上跑在 node 上，因此都是 node 的語法
module.exports = (api, options, rootOptions) => {
  // 修改 `package.json` 裏的字段
  api.extendPackage({
    scripts: {
      test: 'vue-cli-service command'
    }
  })

  // 複製並用 ejs 渲染 `./template` 內全部的文件
  api.render('../template')

  if (options.module === 'module1') { 
    // options.module 能夠訪問上面問題數組的第一個對象的值，默認爲: 'module0'
    console.log(`Your choice is ${options.module}`)
  }

  if (options.moduleName === 'myModule') {
    // options.moduleName 能夠訪問到用戶從控制檯輸入的文字
    console.log(`Your input is ${options.moduleName}`)
  }
}
複製代碼

0x05 實戰

上面的代碼筆者準備了一個空架子：

vue-preset-template

你們能夠先 clone 下來，而後跑一下感覺一下效果。

直接跑筆者的倉庫

vue create --preset savokiss/vue-preset-template <project-name>
複製代碼

clone 下來跑本地代碼

vue create --preset ./vue-preset-template <project-name>
複製代碼

跑 git 倉庫的 preset

vue create --preset direct:<git-clone-url> <project-name>
複製代碼

好啦，距離發佈本身的 項目模板只有一步之遙啦~ 那就是： 填充 template 文件夾的內容

其實直接把項目中用到的文件放進去就能夠了，須要注意的是以. 開頭的文件以及 scss 文件寫法不太同樣，具體能夠看下面的參考項目

0x06 參考項目

筆者整理了兩個 preset，歡迎 star 哈

1. PC端項目模板：vue-preset-pc
2. 移動端項目模板：vue-preset-mobile

0xFF 文檔

• 原文連接
• CLI3插件和Preset
• 插件核心概念
• 空架子

公衆號：碼力全開