自定義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…