vue plop初体验

参考：www.jianshu.com/p/7aba9fbf1…

plop

plop是一种模板生成工具，不仅限于vue的项目，作用就是避免重写代码，增加开发效率。

安装

项目安装

npm install --save-dev plop

全局安装

npm install -g plop

使用

在根目录创建一个文件plopfile.jsplop已经将这个文件作为执行入口

//plopfile.js
module.exports = function (plop) {
    plop.setGenerator('test', {
        description: 'generate a test',
        prompts: [
            {
                type: 'input',  // 交互类型
                name: 'name',   // 参数名称
                message:'请输入文件名称' // 交互提示
            }
        ],
        actions: data => {
            const name = '{{name}}';
            const actions = [
                {
                    type: 'add',  //类型创建模板文件
                    path: `src/views/${name}/index.vue`,//文件创建路径
                    templateFile: 'plop-templates/view/index.hbs', //文件模板
                    data: {
                        name: name   //参数名
                    }
                }
            ];
            return actions;
        }
    })
}

模板文件，根目录创建plop-templates文件夹

• plop-templates
  • view
    • index.hbs

<!--plop-templates/view.index.hbs-->
<template>
    <div class="{{name}}-page"></div>
</template>

<script>
    export default {
        name: '{{ properCase name }}',
        props: {},
        data() {
            return {}
        },
        created() { },
        mounted() { },
        methods: {}
    }
</script>

<style lang="scss" scoped>

</style>

编译运行

在vue的package.json文件中，添加运行参数

 "scripts": {
    ...
    "new": "plop"
  }

运行

npm run new

> plop
? 请输入文件名称 test
√  ++ \src\views\test\index.vue

模板生成成功

<template>
    <div class="test-page"></div>
</template>

<script>
    export default {
        name: 'Test',
        props: {},
        data() {
            return {}
        },
        created() { },
        mounted() { },
        methods: {}
    }
</script>

<style lang="scss" scoped>

</style>