plop自动构建.vue文件

在开发项目的时候，有很多重复的工作，不想复制粘贴，所以引用了plop这个插件，记录一下。

1.安装plop

npm install plop -D

2.在根目录中新建一个plopfile.js文件

用于编写在命令行向用户提出问题，并根据用户输入的内容来进行各种操作，是plop的入口文件，需要导出一个函数，该函数接收一个plop对象做为参数

目录结构：

plopfile.js内容

创建多个文件： 在action中进行增加

module.exports = function(plop) {
    plop.setGenerator('generator',{
        description: '创建列表模板',      //这里是对这个plop的功能描述
        prompts: [{
            type: 'input', // select
            message: '请输入模块名称如system(可省略)',
            name: 'modeName',
            default: ''
        },{
            type: 'input', // select
            message: '请输入文件夹名称如userManage(不可省略)',
            name: 'name'
        }],
        actions: [{
            type: 'add',
            path: '{{modeName}}' ?'src/views/{{modeName}}/{{name}}/index.vue':'src/views/{{name}}/index.vue', //文件存放路径
            templateFile: 'plop-templates/index.hbs' //模板文件
        },{
            type: 'add',
            path: '{{modeName}}' ?'src/views/{{modeName}}/{{name}}/Grid.vue':'src/views/{{name}}/Grid.vue', //文件存放路径
            templateFile: 'plop-templates/Grid.hbs' //模板文件
        },{
            type: 'add',
            path: '{{modeName}}' ?'src/views/{{modeName}}/{{name}}/Search.vue':'src/views/{{name}}/Search.vue', //文件存放路径
            templateFile: 'plop-templates/Search.hbs' //模板文件
        },{
            type: 'add',
            path: '{{modeName}}' ?'src/api/{{modeName}}/{{name}}.ts':'src/api/{{name}}.js', //文件存放路径
            templateFile: 'plop-templates/api.hbs' //api
        },{
            type: 'add',
            path: '{{modeName}}' ?'src/views/{{modeName}}/{{name}}/modules.ts':'src/views/{{name}}/modules.ts', //文件存放路径
            templateFile: 'plop-templates/modules.hbs' //文件夹下的modules.ts
        }]
    })
}

3. 先创建一个plop-temp文件夹来存放模板文件

4.命令配置

package.json 配置

 "scripts": {
        "plop": "plop"
    },

5.执行

npm run plop