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 辅助函数

一、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 进行渲染. 用户输入的数据会作为模板渲染时的使用数据。

二、filters

filters 字段是一个包含文件过滤规则的对象, 键用于定义符合 minimatch glob pattern 规则的过滤器, 键值是 prompts 中用户的输入值或者表达式，代码如下：

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

　　在上面的询问中，如果你vuex选项选择了no，你的store文件夹以及其下面的子文件将被删除，蜀国选的yes，store文件夹以及其下面的子文件将被保留。

三、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)
    }
}

　　

四、complete或completeMessage

complete为一个函数，completeMessage为一个字符串。

如果同时写了这两个，会调用complete函数，即complete的优先级高。

"completeMessage": "请按以下步骤启动，耐心等待:

  {{^inPlace}}cd {{destDirName}}
  {{/inPlace}}npm i
  npm run dev 或者 npm start"

　　在completeMessage中支持插值表达式的写法。