定制团队自己的 Vue template

一,我们使用vue-cli 可以快速初始化vue.js的项目，官方提供了webpack,pwa,browserify-sipmple,等常用template

二、置知识
1，模板结构
template:该目录主要存放模板文件，初始化项目生成文件来源与此
meta.js/meta.json：用于描述初始化项目时命令行交互动作
2，Metalsmith
Metalsmith 在渲染文件担任的角色是gulp.js,可以通过添加一些插件对结构文件处理，如重命名，合并等
3，download-git-repo
使用vue-cli初始化项目使用该工具下载目标仓库
4,inquire.js
vue-cli库下载完成，使用inquire.js使用交互式命令对meta.js进行配置，

5，Handlebars.js
这里 vue-cli 选用的是 Handlebars.js —— 一个简单高效的语义化模板构建引擎。

三、meta.js 配置文件（Inquirer.js）
1，helpers:自定义 Handlebars.js 的辅助函数
2,prompts:基于 Inquirer.js 的命令行交互配置
3,filters:根据命令行交互的结果过滤将要渲染的项目文件
4,completeMessage:将模板渲染为项目后，输出一些提示信息，取值为字符串
5,metalsmith:配置 Metalsmith 插件，文件会像 gulp.js 中的 pipe 一样依次经过各个插件处理

 

 

四、结合本身项目总结

 辅助函数可以接受若干个参数，最后一个参数options为辅助函数的钩子，调用options.fn（this）即输出该辅助函数运算结果为真时的内容，反之调用options.inverse(this)的内容

 

name与author:交互字段名称，可在后续条件交互或模板渲染时通过该字段读取到交互的的结果。 type:交互类型，有input,confirm,list,rawlist,expand,checkbox,password,editor八种类型 message:交互的提示信息 when:进行该条件交互的先决条件 default:默认值，当输入为空时默认此值 required:默认为false，该值是否为必填项 validate:输入验证函数 模板基本语法（Handlebars.js）

filters中键名是要控制输出的文件的路径，键名对应的值为命令行交互中得到的数据

将模板渲染为项目后输出一些提示信息，取值为字符串

2，手写一个loader

{

test: /.txt$/,

use: {

loader: path.resolve(__dirname, './txt-loader.js'),

options: {

name: 'YOLO'

}

}

}

 txt-loader.js的代码

module.exports = function (source) {

// const options = utils.getOptions(this)

source = source.replace(/[name]/g, 'ddd')

return `export default ${JSON.stringify({

content: source,

filename: 'dddd'

})}`

}

 

 

在app.js里面引用

import test from './a.txt'

console.log('cccc' + JSON.stringify(test))