模板結構

主要包括四個部分：

preset.json
prompts.js
generator/index.js
template/

preset.json

preset.json 中是一個包含建立新專案所需預定義選項和外掛的 JSON 物件，讓使用者無需在命令提示中選擇它們，簡稱預設；

prompts.js

互動式的告知vue create所需，是根據使用者使用需求自定義設定的資訊。

定義格式參考Inquirer 問題格式的陣列（Inquirer官方文件）

generator.js

generator.js 匯出一個函式，這個函式接收三個引數

一個 GeneratorAPI 例項
1. 提供一系列的API控制最終輸出的目錄結構及內容
2. 自定義模版必然用到 GeneratorAPI 的 render() 方法
使用者自定義的設定選項
1. 即：使用者對 prompts.js 中問題所提供的答案
整個 preset 預設資訊

簡單的自定義模板示例

建立專案

手動建立目錄結構：

|- vue-template
  |- generator
    |- index.js
  |- preset.json
  |- prompts.js

獲取preset.json模板

先用 vue create 去建立一個專案，然後把你的預設資訊儲存下來，到指定目錄下查詢預設資訊：

# Unix
~/.vuerc
# windows
C://使用者/<username>/.vuerc

{
  "useTaobaoRegistry": false, 
  "latestVersion": "4.5.14", 
  "lastChecked": 1634820758861, 
  "packageManager": "npm",
  "presets": {
    "v2": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": false,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-router": {
          "historyMode": false
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save",
            "commit"
          ]
        }
      },
      "vueVersion": "2",
      "cssPreprocessor": "dart-sass"
    }
  }
}

其中，presets 儲存的就是預設資訊，v2 是儲存預設起的別名，我們的preset.json 需要的就是 v2 的值，所以preset.json 中的內容就是這樣

{
  "useConfigFiles": true,
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-typescript": {
      "classComponent": false,
      "useTsWithBabel": true
    },
    "@vue/cli-plugin-router": {
      "historyMode": false
    },
    "@vue/cli-plugin-vuex": {},
    "@vue/cli-plugin-eslint": {
      "config": "prettier",
      "lintOn": [
        "save",
        "commit"
      ]
    }
  },
  "vueVersion": "2",
  "cssPreprocessor": "dart-sass"
}

建立問答prompts.js

module.exports = []

prompts.js 我們可以不提供問題，匯出一個空陣列就行；

建立專案模板生成器generator

# generator/index.js
module.exports = (api, options, rootOptions) => {
  api.extendPackage({
    # 擴充套件pkg#scripts
    scripts: {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    }, 
    # 擴充套件pkg#dependencies
    dependencies: {
      "vue": "^2.6.11"
    }, 
    # 擴充套件pkg#devDependencies
    devDependencies: {
      "@babel/core": "^7.11.4",
      "@babel/preset-env": "^7.11.0",
      "@vue/cli-service": "~4.5.0",
      "sass": "^1.26.10",
      "sass-loader": "^8.0.2"
    }
  });
  # 複製template模版
  api.render('../template');
};

私有依賴

若儲存配置.vuerc,且其中useTaobaoRegistry = true，在通過模板建立專案時，會報私有依賴無法找到，這需要我們在建立專案前檢查全域性配置項。

  var vuerc = shell.exec('vue config', { silent:true }).stdout
  var deleteConfigKey = 'useTaobaoRegistry'
  if (new RegExp(deleteConfigKey).test(vuerc)) {
    shell.exec(`vue config --set ${deleteConfigKey} false`, { silent:true })
  }
  child.execSync(
    `vue create --preset multi-act --clone ${projectName}`,
    {
      stdio: 'inherit'
    }
  );
  fs.ensureDirSync(`${projectName}/${Configure.BaseUri}`)

建立模板

最後只需將專案模版複製到 template 中，然後刪除 package.json 檔案。
對於以 . 開頭的檔案，改成 _ ，例如 .eslintrc.js ==》_eslintrc.js。

因為以. 開頭的檔案，在Git上傳、拉取時會被忽略。

預設模板結構

如果專案中多了些Vue-Cli預設模版的檔案，可以使用下方方法刪除預設模版

  // 儲存vue-cli3 預設目錄
  const defaultDirs = []
  api.render(files => {
    Object.keys(files)
      .filter(path => path.startsWith('src/') || path.startsWith('public/'))
      .forEach(path => {
        defaultDirs.push(path)
        delete files[path]
      })
  })
  api.render('../template')
  // 刪除 vue-cli3 預設目錄
  api.postProcessFiles(files => {
    defaultDirs.forEach(path => delete files[path])
  })

除錯

使用 vue create --preset <relativePath/vue-template> <project_name> 去建立專案。

部署

可以選擇將模板部署到github、gitlab上。

# GitHub 
$ vue create --preset <username>/<repo> <vue_project_name> 
 
# GitLab 私有伺服器 
$ vue create --preset gitlab:<my-gitlab-server.com>:<group>/<project_name> --clone <vue_project_name> 

# 通用
$ vue create --preset direct:<url> --clone <vue_project_name>

具體的模板引數可以參考download-git-repo

自定義Vue-cli專案模板