模板构造

次要包含四个局部：

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

preset.json

preset.json 中是一个蕴含创立新我的项目所需预约义选项和插件的 JSON 对象，让用户无需在命令提醒中抉择它们，简称预设；

prompts.js

交互式的告知vue create所需，是依据用户应用需要自定义设置的信息。

定义格局参考Inquirer 问题格局的数组（Inquirer官网文档）

generator.js

generator.js 导出一个函数，这个函数接管三个参数

  1. 一个 GeneratorAPI 实例

    1. 提供一系列的API管制最终输入的目录构造及内容
    2. 自定义模版必然用到 GeneratorAPI 的 render() 办法

  2. 用户自定义的设置选项

    1. 即：用户对 prompts.js 中问题所提供的答案
  3. 整个 preset 预设信息

简略的自定义模板示例

创立我的项目

手动创立目录构造：

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

获取preset.json模板

先用 vue create 去创立一个我的项目，而后把你的预设信息保留下来，到指定目录下查找预设信息：

# Unix~/.vuerc# windowsC://用户/<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.jsmodule.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 <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

参考我的项目：

  • https://github.com/cklwblove/...
  • https://github.com/Kocal/vue-...
  • https://github.com/cklwblove/...
  • https://git.n.xiaomi.com/xued...

参考文档：

  • https://notes.jindll.com/web/...
  • https://cli.vuejs.org/zh/dev-...
  • https://blog.beard.ink/JavaSc...
  • https://www.open-open.com/lib...
  • https://xuezenghui.com/posts/...
  • https://segmentfault.com/a/11...
  • http://axuebin.com/articles/f...