前言:现在的项目是用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中进行更改。

Logo

前往低代码交流专区

更多推荐