自定义vue-cli项目模板

1. 根目录下创建 template 目录, 在该目录下定义你的模板文件

2. 根目录下创建 meta.{js,json} 文件, 该文件必须导出为一个对象, 用于定义模板的 meta 信息 , 目前可定义的字段如下:

   字段	描述
   prompts	收集用户自定义数据，会在命令行询问并提示输入
   filters	根据条件动态渲染模板中的块
   completeMessage	模板渲染完成后给予的提示信息, 支持 handlebars(handlebars会用来渲染每个template目录下的文件) 的 mustaches表达式
   complete	模板渲染完成后的回调函数, 优先于 completeMessage,如果 complete 有定义, 则调用 complete, 反之会输出 completeMessage
   helpers	自定义的 Handlebars 辅助函数

   prompts:

   {
       "prompts": {
           "name": {
           	"type": "string",   
           	"required": true,   
   	        "message" : "Project name"
   	    },
   	    "test": {
           	"type": "confirm",
   	       "message" : "Unit test?"
   	    },
   	    "version": {
   	       "type": "input",
   	       "message": "project's version",
   	       "default": "1.0.0"
   	    }
       }
   }
   
   // template/package.json
   {{#test}}
   "test": "npm run test"
   {{/test}}
   
   //以上代码在问题test答案为true时，才渲染package.json中的test部分
   
   

   filters:

   template/:
   ...
   test.{js,json,vue...}
   ...
   
   
   //meta.{js,json}
   {
     "prompts": {
         "unit": {
             "type": "confirm",
             "message": "Setup unit tests with Mocha?"
         }
     },  
     "filters": {
       "test/*": "unit"
     }
   }
   //以上代码会在问题unit答案为true时，才渲染template目录下的test文件(夹)
   

   如果要匹配以 . 开头的文件, 则需要将 minimatch的dot选项设置成true，配置规则详见minimatch

   helpers

   helpers 字段是一个包含自定义的 Handlebars 辅助函数的对象, 自定义的函数可以在 template 中使用:

   {
   	"helpers": {
   	    "if_or": function (v1, v2, options) {
   	      if (v1 || v2) {
   	        return options.fn(this);
   	      }
   	
   	      return options.inverse(this);
   	    }
     	},
   }
   

   在 template 的文件使用该 if_or:

   {{#if_or val1 val2}}
   // 当 val1 或者 val2 为 true 时, 这里才会被渲染
   {{/if_or}}
   

3. 上传项目模板到github

4. 通过命令vue init {git-address} {myProjectName} 创建项目
   注：如果git地址为https://github.com/anderlaw/vuelight.git，则只需要vue init anderlaw/vuelight {myProjectName}即可

原文：github.com/dwqs/blog/i…