plop使用简单教程-告别复制黏贴plop微型生成器框架，支持自定义特定代码模板，在项目中执行指令快速生成生成多文件代码

plop介绍

一个微型的生成器框架，提供了可以快速生成文件的功能，可以解决项目开发过程中新建一个新的已经存在的模板时，已有模板文件存在代码逻辑，复制黏贴耗时的问题，在多页面开发中，创建新页面也可以通过添加生成器和action批量创建文件结构，避免繁琐的多次创建文件和文件夹。

plop支持我们自定义特定代码模板，在项目中执行指令快速生成。

plop是inquirer对话框和handlebars 模版的结合

安装和使用

安装npm包 yarn add plop -D
plopfile.js文件语法

    moduleexports = plop => {
        plop.setGenerator('generatorName', {
            propmts: [
                // 控制台交互式语法
            ],
            action: [
                // 通过propmts获取的输入，动态执行文件创建
                // 如果有需要动态执行的action这里也可以是函数，函数返回action数组
            ]
        })
    }

根目录创建plop执行文件plopfile.js

    module.exports = plop => {
      // 设置一个生成器，第一个参数是项目名称（当多个generator的时候在控制面板就会让你选择哪个生成器，名字就派上用场了），第二个函数是对象，对应设置选项
      plop.setGenerator('createPage', {
        // 描述
        description: 'create a page',
        // 命令行交互问题
        prompts: [
          // 输入页面名称
          {
            type: 'input',
            name: 'name',
            message: 'input page name',
            default: 'pageNameDefault'
          },
          // 是否需要store
          {
            type: 'confirm',
            name: 'needStore',
            message: 'is need store',
            default: true
          },
          // 是否需要路由
          {
            type: 'confirm',
            name: 'needRouter',
            message: 'is need router',
            default: true
          }
        ],
        // 完成命令行交互过后完成的一些动作，这里使用函数式是为了动态执行一些action
        actions: (data) => {
          const actions = [
            //每一个对象都是一个动作
            {
              type: 'add', // 代表添加文件
              // 被添加的文件在输出的哪个路径，双花括号插值表达式可以获取交互得到的数据
              path: 'views/{{name}}/main.js',
              // 模板文件地址
              templateFile: 'plopTemplate/main.hbs'
            },
            {
              type: 'add',
              path: 'views/{{name}}/App.vue',
              templateFile: 'plopTemplate/app.hbs'
            },
            {
              type: 'add',
              path: 'views/{{name}}/index.html',
              templateFile: 'plopTemplate/htmlTemplate.hbs'
            },
            {
              type: 'add',
              path: 'views/{{name}}/containers/index.vue',
              templateFile: 'plopTemplate/vueDefault.hbs'
            }
          ]
          // 根据prompt中的输入条件判断是否创建router相关内容
          data.needRouter && actions.push({
            type: 'add',
            path: 'views/{{name}}/routes/index.js',
            templateFile: 'plopTemplate/route.hbs'
          })
          // 根据prompt中的输入条件判断是否创建store相关内容
          data.needStore && actions.push(
            {
              type: 'add',
              path: 'views/{{name}}/store/index.js',
              templateFile: 'plopTemplate/storeParent.hbs'
            },
            {
              type: 'add',
              path: 'views/{{name}}/store/modules/{{name}}.js',
              templateFile: 'plopTemplate/storeChild.hbs'
            },
          )
          return actions 
        }
      })
    }

根目录创建plop模板文件夹plopTemplate（不一定要放在根目录）

    |-- plopTemplate
        |-- main.hbs
        |-- app.hbs
        |-- vueDefault.hbs

vueDefault.hbs文件内容

// 页面里面的{{ name }}就是plopfile.js文件prompts中name要输入的值(执行指令的时候用户输入了，默认值是pageNameDefault)

    <template>
      <div class="{{ name }}">
        这是 {{ name }} 页面
      </div>
    </template>

    <script>
      export default {
        name: {{ name }},
        data () {
          return {}
        }
      }
    </script>

    <style lang="less" scoped>

    </style>

在package.json中添加脚本指令

    "scripts": {
        "newPage": "plop"
    }

执行脚本yarn newPage，这个时候控制台会提示你输入name，会替换我们配置中和hbs模板文件中写的{{ name }}值

setGenerator执行器

plop的setGenerator执行器可以设置多个，会在执行yarn newPage的时候可供选择执行

    module.exports = plop => {
      // 设置一个生成器，第一个参数是项目名称，第二个函数是对象，对应设置选项
      plop.setGenerator('createPage', {
        // 同上
      })
      plop.setGenerator('singlePage', {
        prompts: [
          // 输入页面名称
          {
            type: 'input',
            name: 'name',
            message: 'input page name',
            default: 'pageNameDefault'
          },
          // 输入页面地址
          {
            type: 'input',
            name: 'dir',
            message: 'input page dir(demo/component)',
            default: 'default.vue'
          }
        ],
        actions: [
          {
            type: 'add',
            path: 'views/{{dir}}/{{name}}.vue',
            templateFile: 'plopTemplate/vueDefault.hbs'
          }
        ]
      })
    }

选择singlePage就是我们第二个setGenerator执行器

输入创建文件名&文件存放地址

执行完createPage的执行器后，最终生成的文件目录是

对话框输入分别是:
input page name: openVipPage
is need store: y
is need router: y

|-- views
    |-- containers
        |-- index.vue
    |-- routes
        |-- index.js
    |-- store
        |-- modules
            |-- openVipPage.js
        |-- index.js
    |-- App.vue
    |-- index.html
    |-- main.js

prompts参数

该参数主要是用于CMD终端中用户交互指令，获取到用户输入内容用于hbs模板和actions中参数

{
    type: 'input',
    name: 'name',
    message: 'input page name',
    default: 'pageNameDefault'
}

type：填写类型input|confirm|number|password等
name：填写数据赋值的key，actions和hbs模板可以通过{{name}}获取该值
message：提示输入语，类似于表单中的label
default: 默认值，如果不填，则使用整个默认值赋值

更多参数查看

actions参数

prompt捕获完用户输入后，actions是实际执行的列表，根据用户输入创建定义好的文件，actions可以是一个数组，也可以四个返回actions数组的函数

{
    type: 'add',
    path: 'src/views/{{name}}/App.vue',
    templateFile: 'plopTemplate/app.hbs'
}

type：action的类型add|modify|addMany
path：生成文件后存放的位置
templateFile：模板文件

更多参数查看

用途

指令一次性创建多个文件（避免繁琐的手动创建，且文件可以用捕获用户的输入填充内容）
创建单个文件，文件内容需要通过配置动态显示内容也适用

vscode代码模板生成

简单的单个文件也可以通过vscode配置代码模板在页面快速生成

步骤：

1. ctrl+shift+p
2. 输入snippets，选择configure user snippets(配置用户代码片段)
3. 选择vue.json
4. 配置
"Print to console": {
	"prefix": "vue-template",
	"body": [
		"<template>",
		"  <div>",
		"  </div>",
		"</template>",
		"",
		"<script>",
		"export default {",
		"  data () {",
		"    return {}",
		"  }",
		"}",
		"</script>",
		"",
		"<style scoped>",
		"",
		"</style>"
	],
	"description": "Log output to console"
}
5. 在页面输入vue-template会快速生成body里面的模板内容

plop使用简单教程-告别复制黏贴