模板结构

主要包括四个部分：

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://用户//.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');
};

创建模板

最后只需将项目模版复制到 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 去创建项目。

部署

可以选择将模板部署到github、gitlab上。

# GitHub 
$ vue create --preset /  
 
# GitLab 私有服务器 
$ vue create --preset gitlab::/ --clone  

# 通用
$ vue create --preset direct: --clone

具体的模板参数可以参考download-git-repo

自定义Vue-cli项目模板