一,我们使用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)的内容
filters中键名是要控制输出的文件的路径,键名对应的值为命令行交互中得到的数据
将模板渲染为项目后输出一些提示信息,取值为字符串
2,手写一个loader
txt-loader.js的代码
在app.js里面引用