vue中plop-templates自动创建项目文件
前言:现在的项目是用vue-element-admin模板进行二次开发,只保留了基本框架。突然发现目录中有个plop-template文件夹,之前没有注意过,也不清楚是用来做什么的。du娘告诉我原来是自动创建项目文件用的。1.之前创建新文件都是鼠标右键新建一个new文件,然后输入vue,选择生成一个最简单的模板,但是生命周期的钩子函数还是得自己输入。2.添加plop-template的方式①在项目
·
前言:现在的项目是用vue-element-admin模板进行二次开发,只保留了基本框架。突然发现目录中有个plop-template文件夹,之前没有注意过,也不清楚是用来做什么的。du娘告诉我原来是自动创建项目文件用的。
1.之前创建新文件都是鼠标右键新建一个new文件,然后输入vue,选择生成一个最简单的模板,但是生命周期的钩子函数还是得自己输入。
2.添加plop-template的方式
①在项目跟目录下创建plopfile.js文件,添加如图代码
const viewGenerator = require('./plop-templates/view/prompt')
const componentGenerator = require('./plop-templates/component/prompt')
module.exports = function(plop) {
plop.setGenerator('view', viewGenerator)
plop.setGenerator('component', componentGenerator)
}
② 在项目根目录中创建plop-template文件夹,点击下载模板:
https://download.csdn.net/download/qq_41833439/12704983
③在package.json的"script"里面添加"new":“plop”
3. 体验一下
①在控制台输入 npm run new
问是创建view还是component,这个就看自己的选择需要,我这里选择view
②输入新建文件的名称
③默认全选,根据提示按需选择
④回车就可以看到在view文件夹下多出了helloworld文件夹,点击打开index.vue就可以看到完整模板。
模板的具体可以按需自己在plop-template下的index.hbs中进行更改。
更多推荐
已为社区贡献4条内容
所有评论(0)