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中支持插值表达式的写法。