模板结构
主要包括四个部分：
- preset.json
- prompts.js
- generator/index.js
- template/
preset.json
preset.json 中是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们，简称预设；
prompts.js
交互式的告知vue create所需，是根据用户使用需求自定义设置的信息。
定义格式参考Inquirer 问题格式的数组（Inquirer官方文档）
generator.js
generator.js 导出一个函数，这个函数接收三个参数
一个 GeneratorAPI 实例
- 提供一系列的API控制最终输出的目录结构及内容
- 自定义模版必然用到 GeneratorAPI 的 render() 方法
用户自定义的设置选项
- 即：用户对 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
参考项目：
- https://github.com/cklwblove/...
- https://github.com/Kocal/vue-...
- https://github.com/cklwblove/...
- https://git.n.xiaomi.com/xued...