基于PLOP使用命令行自动生成 .vue 文件

在使用 vue-element-admin 框架时，你会发现它的根目录下有个 plop-templates 文件夹，那它是干嘛用的呢？
带着疑问，你首先会去 baidu 一下，才知道原来是自动创建项目文件用的。
其实它里面用到了 plop模板工具，它是一款用命令行就可以自动生成代码模版的工具。

plop的介绍可以看 plop官网，plop 功能主要是基于 inquirer 和 handlebars 。

简单的说就是通过提前配置要生成的页面模板，并且在命令行中接受指定的参数，从而生成我们需要的模板。

这里简单介绍一下我们实现的基础模板生成的流程，关于plop的API和其他相关内容不再赘述，感兴趣的朋友可以前往官网查阅。

plop使用不仅限于vue项目，在此只是使用vue项目为例。

1、安装plop

首先我们需要在项目中安装plop：

npm i plop -D

2、基本配置

由于 plop 的模板基于 handlebars，我们在根目录下创建一个 plop-templates 文件夹，并在 plop-templates/view 里新建一个index.hbs：

<template>
  <div />
</template>

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

<style lang="" scoped>

</style>

然后编写plopfile.js

module.exports = function(plop){
        
plop.setGenerator('test',{
    description: 'generate a test',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'view name please',
      }
     }
    ],
    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;
    })
}

3、设置运行指令

最后在 package.json 中设置script运行指令：

"script":{
    "new: "plop"
}

4、根据模板生成文件

运行 npm run new 或 yarn new

$ npm run new
> plop
? view name please test
√  ++ \src\views\test\index.vue

然后输入 name 后，在项目的 src/views/test 文件夹下，就可以看到根据刚才自定义模板生成的 index.vue 文件了：

<template>
  <div />
</template>

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

<style lang="" scoped>

</style>

这样执行命令后就会根据你输入的 name 生成对应的文件夹和文件，并且组件的 name 也已经有了值。
name的值是通过action的时候返回给hbs，后插入到文件中，具体这部分内容可以参考 plop 和 handlebars 的官方文档。

5、小结

当然，plop的使用并不只生成静态的模板，我们可以自由发挥配置生成的文件需要显示的内容、文件生成位置、CSS处理器类型、JS/TS等，甚至同时生成Router文件。