如何使用vue-cli3的preset创建基于gitrepo的前端项目模板当你需要为群组自定义一个基于vue-cli的前端项目初始化模板时，你需要思考：应该如何我做吗？我们要做的很简单。别人使用vuecreatexxx命令初始化一个前端项目时，可以从gitrepo中拉取项目初始化信息。有两个好处：团队内所有新项目都有统一的目录结构和代码组织方式方便维护。后期可以开发公共插件服务于不同的项目，提高效率。因为vue-cli3才出来不久，所以在摸索的过程中踩了很多坑，这里总结一下。整体设计vue-cli官网介绍：你可以通过发布gitrepo来分享一个preset给其他开发者。此repo应包含以下文件：preset.json：包含预设数据的主文件（必需）。generator.js：一个可以在项目中注入或修改文件的Generator。prompts.js：一个提示文件，通过命令行对话框收集生成器的选项。#使用来自GitHub的presetvuerepocreate--presetusername/repomy-projectGitLab和BitBucket也被支持。如果你从私人仓库中获取，请确保使用--clone选项：vuecreate--presetgitlab:username/repo--clonemy-projectvuecreate--presetbitbucket:username/repo--clonemy-project是不是看起来很简单，至少我在实践的过程中还是遇到了一些问题，所以接下来重点说一下。gitrepo参数上面的参数username/repo后面跟着--preset其实就是下图红框里面的部分（不要以为是gitclone之后的地址）：preset.json文件我来说说首先：当你直接使用vuecreatexxx初始化项目时，如果你将初始化信息保存为本地模板，它会被写入到你系统的~/.vuerc文件中。这个文件里面的内容其实就是我们接下来需要配置的present.json。此处直接显示代码：{"useConfigFiles":true,"cssPreprocessor":"less","plugins":{"@vue/cli-plugin-babel":{"version":"^3.0.0"},"@vue/cli-plugin-eslint":{"version":"^3.0.0","config":"recommended","lintOn":["save","commit"]}},"configs"：{“vue”：{“baseUrl”：“/”，“outputDir”：“dist”，“assetsDir”：“static”，“filenameHashing”：true，“lintOnSave”：true，“runtimeCompiler”：false，“transpileDependencies":[],"productionSourceMap":false,"pages":{"index":{"entry":"src/main.js","template":"public/index.html","filename":"index.html","title":"首页","chunks":["chunk-vendors","chunk-common","index"]}},"devServer":{"open":true,"host":"127.0.0.1","https":false,"hotOnly":false,"proxy":null},"pwa":{},"pluginOptions":{}},"postcss":{},"eslintConfig":{}},"router":true,"vuex":false,"routerHistoryMode":false}当"useConfigFiles":true时，configs配置初始化后信息会直接覆盖项目中的vue.config.jsprompts.js文件prompts.js，其实你在初始化项目的时候，系统会问你配置选项，比如你需要在里面安装vuex吗你的项目？不需要安装vue-router吗？你的回答会直接影响到后面初始化生成的项目文件。这里最需要注意的是！！！当你看官方文档的时候，第一件事你看到的是下图：只要这样写，就会报错！！！原因很简单：上图中prompts.js的写法就是基于vue-cli-service插件，当你要开发项目模板时，正确的写法如下：module.exports=[{name:"vuex",type:"confirm",message:`是否需要使用vuex`,default:false},{name:"elementUI",type:"confirm",message:`element-ui`，默认值：false}];这一点其实官网上也有提到，只是不太容易注意到。这里我将介绍如何在开源插件vue-cli-plugin-vuetify中编写prompts.js。程序员们，我最喜欢的是chestnut.generator.js文件后面是generator.js，负责在项目中注入或者修改文件。同样，我还是直接showcode:module.exports=(api,options,rootOptions)=>{//安装一些基础的公共库api.extendPackage({dependencies:{"axios":"^0.18.0","lodash":"^4.17.10","keymirror":"^0.1.1"},devDependencies:{"mockjs":"^1.0.1-beta3"}});//安装vuexif(options.vuex){api.extendPackage({dependencies:{vuex:'^3.0.1'}});api.render('./template/vuex');}//安装element-ui库if(options.elementUI){api.extendPackage({devDependencies:{"element-ui":"^2.4.6"}});}//通用基础目录和文件api.render('./template/default');//配置文件api.render({'./.eslintrc.js':'./template/_eslintrc.js','./.gitignore':'./template/_gitignore','./.postcssrc.js':'./template/_postcssrc.js'});}Coreapi:api.extendPackage：负责在初始化项目中对package.json添加安装额外的依赖；api.render：负责将模板项目中预先定义的目录和文件复制到初始化项目中；api.postProcessFiles：负责模板项目中文件的具体处理，关于它可以参考Howtobuild自己的vue-cli3插件和GeneratorAPI.js源码需要注意api.render：如果复制目录，直接传地址字符串，render函数会覆盖你传给的目录下的所有文件初始化工程文件中的src目录（我的测试结果仅限于二级目录）；复制文件，直接传入一个对象，key对应初始化项目中的目标位置，value对应模板项目中的文件位置；当您需要创建一个带有.在文件的开头，您需要使用_而不是.在模板工程中，官网有说明；最后，很重要的一点，vue-cli3在复制文件的时候使用了EJS模板来实现，所以开发者可以在任何文件中使用EJS语法进行更细粒度的控制，比如我的main.js:importVuefrom'vue'从'./App.vue'导入应用程序<%_if(options.vuex){_%>从'./store'<%_}_%><%_if(options.elementUI){_%>importElementUIfrom'element-ui';Vue.use(ElementUI);<%_}_%>//模拟数据导入'./mock/index';Vue.config.productionTip=falsenewVue({router,<%_if(options.vuex){_%>store,<%_}_%>render:h=>h(App)}).$mount('#app')其中options.vuex和options.elementUI是用户在处理prompts.js时设置的问题的答案值。基于此，我不再使用api.postProcessFilesapi。今天就写到这里，以后会多写~
