vue init定製團隊模板之meta.js/meta.json寫法入門

在上一篇文章中，咱們提到了meta.js，此次咱們詳細瞭解一下meta.js裏面各個模塊的寫法。

對於 meta.js/metajson 文件, 目前主要字段以下:

• prompts<Object>: 收集用戶自定義數據
• filters<Object>: 根據條件過濾文件
• completeMessage<String>: 模板渲染完成後給予的提示信息, 支持 handlebars 的 mustaches 表達式
• complete<Function>: 模板渲染完成後的回調函數, 優先於 completeMessage
• helpers<Object>: 自定義的 Handlebars 輔助函數

1、prompts

prompts是一個對象，對象裏的每個子對象是一個Inquirer.js，與用戶進行交互，詢問問題的。先看個例子：

{
    prompts: {
		name: {
			type: "input",
			message: "項目名"
		},
		author: {
			type: "input",
			message: "做者"
		},
		email: {
			type: "input",
			message: "郵箱",
			validate: function(answer){
				if(/@/g.test(answer)){
					return true;
				}
				return "郵箱應該含有@符號";
			}
		},
		vuex: {
			type: "confirm",
			message: "你的項目中須要安裝vuex嗎",
			default: true
		}
    } 
}

prompts各類參數配置方法

• type(類型):input(輸入，默認類型), confirm（y/n）, list(列表), rawlist（帶下標的列表）, expand（下標是字母的列表）, checkbox（複選框）, password（密碼）, editor（編輯大篇文字）。
• massage(提示信息——問題):字符串或者函數，若是是函數，返回值須要時字符串；默認是name值，如上面的name,author,email,vuex。
• default（默認值）：這個須要跟據類型和選項來給出對應的默認值，這個就很少說了，你們都明白。
• choices（選項）：list,rawlist,expand,checkbox類型須要給出相應的choice供用戶選擇，數組類型，數組的每一個元素能夠是字符串也能夠是對象。對象能夠有name（選以前的提示信息）、value（選的結果）、short（選以後顯示的結果）。
• validate（有效性驗證）：函數類型，參數是用戶輸入的結果，驗證經過返回true，不然返回一個驗證失敗的提示。
• filter（過濾）：函數類型，參數是用戶輸入的結果，filter的處理結果會改變用戶輸入的結果，這個與後天提到的transformer不一樣。
• transformer（轉換）：函數類型，參數是用戶的輸入結果，transformer的處理結果是用來展現出來的，不會改變用戶輸入的最終結果，僅僅是顯示的不一樣。
• when（控制條件）：函數類型，參數是用戶的輸入結果，當前面的某個結果符合條件時纔會詢問此問題。
• pageSize（每頁顯示的數量）：當有choice選項的時候能夠給用這個來控制每頁顯示的數量。

 

當全部問題問完以後，template 目錄下的全部文件將會用 Handlebars 進行渲染. 用戶輸入的數據會做爲模板渲染時的使用數據。

2、filters

filters 字段是一個包含文件過濾規則的對象, 鍵用於定義符合 minimatch glob pattern 規則的過濾器, 鍵值是 prompts 中用戶的輸入值或者表達式，代碼以下：

filters: {
	"store/*": "vuex"
}

　　在上面的詢問中，若是你vuex選項選擇了no，你的store文件夾以及其下面的子文件將被刪除，蜀國選的yes，store文件夾以及其下面的子文件將被保留。

3、helpers

在hleplers中，你能夠註冊handlebars函數，註冊後，在template裏面的文件中可使用你註冊的輔助函數。vue自帶的有if_eq(判斷兩個參數相等的)和unless_eq這連個輔助函數。

helpers: {
    between(v, v1, v2, options) {
      if (v > v1 && v < v2) {
        return options.fn(this)
      }
      return options.inverse(this)
    }
}

　　

4、complete或completeMessage

complete爲一個函數，completeMessage爲一個字符串。

若是同時寫了這兩個，會調用complete函數，即complete的優先級高。

"completeMessage": "請按如下步驟啓動，耐心等待:\n\n  {{^inPlace}}cd {{destDirName}}\n  {{/inPlace}}npm i\n  npm run dev 或者 npm start"

　　在completeMessage中支持插值表達式的寫法。