前言

在编写常规的后台管理系统时，通常发现多数页面都具有相似结构，基本上由头部查询框，中间分页查询的表格以及弹出框用于新增或者编辑。如下图所示：

想法

面对很多类似的页面，虽然已经有了很多的低代码生成器已经做过了一键生成的方法，但是整体太过庞大，体验感并不是很好。我们最直接的需求是：

1. 减少代码的复制粘贴
2. 使用简单,易上手
3. 体量小
4. 易修改和定制化

所以便想到了使用一个脚手架的工具通过模板和命令行询问的方式生成对应的文件。常见的脚手架工具有yeoman，plop，grunt，gulp,fis等等，他们之间具体的优缺点这里就不说了。最终选择了plop脚手架的方式来生成vue文件，它的优点就像上述一样，轻便并且易上手和容易定制化。

PLOP的使用

1、安装到项目

npm install --save-dev plop
复制代码

这里也可选择全局安装，方便以后使用

npm install -g plop
复制代码

2、创建模板文件

在根目录下创建plop-templates模板文件夹，并创建模板文件，如下图所示

.hbs结尾的便是模板文件，这里我们看一下dialog.hbs介绍

3、创建入口文件plopfiles.js放在根目录

4、运行plop

为了方便npm运行，现在package.json中配置一下plop，如下图所示

然后在终端执行,就会出现对话框

npm run plop
复制代码

运行结果如下

然后就生成了对应的文件，最终完成重复代码的自动生成

总结

Plop作为一个微型的生成器，能够快速，简单的帮我们生成对应了文件，提高开发时的效率，并且在编写模板上面上手简单。

参考链接：blog.csdn.net/hjb2722404/…
感谢大佬提供的参考