使用plop插件编写代码生成机

1. 在项目中添加plop

npm install --save-dev plop

2. 在项目根目录下创建plopfile.js文件

//#region 模版文件
const pageGenerator = require("./plop-temp/page/prompt");
const curdGenerator = require("./plop-temp/curd/prompt");
//#endregion

module.exports = plop => {
    //#region 设置生成器
    //第一个参数为模版的名称（自定义） 用于在创建文件时的选择项
    plop.setGenerator("page", pageGenerator);
    plop.setGenerator("curd", curdGenerator);
    //#endregion
};

3. 在项目根目录下创建模版文件

1.png

4.编辑模版文件（以curd类页面举例）

1.创建两个.hbs文件 index.hbs 和 edit.hbs

{{!-- index 页面 --}}
<template>
    <div class="{{properCase name}}-container">
        <edit></edit>
        <h1>curd</h1>
    </div>
</template>

<script>
    import Edit from "./components/{{properCase name}}Edit"
    export default {
        name: "{{ properCase name }}",
        components: { Edit },
        data() {
            return {};
        },
        created() { },
        mounted() { },
        methods: {},
    };
</script>

{{!-- edit 页面 --}}
<template>
    <div class="{{properCase name}}Edit-container">
        <h3>Edit</h3>
    </div>
</template>

<script>
    export default {
        name: "{{ properCase name }}Edit",
        components: {},
        data() {
            return {};
        },
        created() { },
        mounted() { },
        methods: {},
    };
</script>

2.编辑prompt.js文件

//校验字符串是否为空
const { notEmpty } = require("../utils.js");
//生成路
let { templateFolder } = require("../../src/config/setting");
module.exports = {
    description: "创建curd", //描述文件
    prompts: [
        {
            type: "input",
            name: "name", // 创建时输入的文件名
            message: "请输入curd名称,勿与之前重复,然后点击回车",
            validate: notEmpty("name")
        }
    ],
    actions: data => {
        console.log(data);
        const name = "{{name}}";
        const properCaseName = "{{properCase name}}";
        const actions = [
            {
                type: "add",
                path: `src/${templateFolder ||
                    "project"}/${properCaseName}/index.vue`, //生成文件后的存储路径
                templateFile: "./plop-temp/curd/index.hbs", //路径以plopfile.js 文件开始计算
                data: {
                    name: name
                }
            },
            {
                type: "add",
                path: `src/${templateFolder ||
                    "project"}/${properCaseName}/components/${properCaseName}Edit.vue`,
                templateFile: "./plop-temp/curd/edit.hbs"
            }
        ];

        return actions;
    }
};

5. 编辑项目package.json文件 ，添加一个scripts指令

"temp": "plop"

{
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "temp": "plop"  //  运行plop
    },
}

6.使用npm 运行plop

npm run temp

2020-10-14 10-32-45~1.gif