使用plop实现自动新建项目文件

发布于 / 学习

为什么

一般项目开发过程中,我们都要编写(CV)一大堆重复性的代码,比如一个views/login/index.vue比如store/modules/app.js这些文件都是重复毫无意义的,找一个自动生成的工具就很有价值了

使用

github上找到了这样一个包plop,具体信息可以自行去看官方文档,下面直接给出我在项目中使用的

可以看我的这个项目,里面有具体的demofast_h5_vue

1.项目根目录下新建plopfile.js

const viewGenerator = require('./plop-templates/view/prompt')
const componentGenerator = require('./plop-templates/component/prompt')
const storeGenerator = require('./plop-templates/store/prompt.js')

module.exports = function(plop) {
  plop.setGenerator('view', viewGenerator)
  plop.setGenerator('component', componentGenerator)
  plop.setGenerator('store', storeGenerator)
}

这里是三个文件类型分别是view页面,component组件,store vuex文件

2.项目根目录下新建plop-templates文件夹

代码太多,我直接给出文件链接plop-templates

3.新增脚本

package.json中新增

"script":{
    ...,
    "new":"plop"
}

4.具体使用

控制台直接输入命令

yarn new

按照提示选择文件类型

关于

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/plop-new-file.html