Plop is a small but beautiful scaffolding tool that is used to create specific types of files in a project. Plop is mainly integrated into a project and helps us to quickly generate initial template files with certain specifications. For example, when we write Vue components, if we write the initial content of components manually every time, it will be tedious, and there may be errors, and everyone may write different specifications. At this point we can use Plop to create the initial content of the canonical Vue component, which is quick, easy to manage, and canonical.

plop: https://www.npmjs.com/package/plop

The installation

yarn add plop --dev

After the installation is complete, create the plopfile.js file in the project root directory

const promptDirectory = require('inquirer-directory')
const pageGenerator = require('./template/page/prompt')
const apisGenerator = require('./template/apis/prompt')
module.exports = function (plop) {
    plop.setPrompt('directory', promptDirectory)
    plop.setGenerator('page', pageGenerator)
    plop.setGenerator('apis', apisGenerator)
}
Copy the code

Creating a template File

Position/template/page /

index.hbs

<template>
    <section>
       
    </section>
</template>

<script>
export default {
    name: '{{ name }}'.data() {
        return{}},methods: {}}</script>
Copy the code

prompt.js

const path = require('path')

const notEmpty = (name) = > {
    return (v) = > {
        if(! v || v.trim ===' ') {
            return `${name} is required`
        } else {
            return true}}}module.exports = {
    description: 'generate vue template'.prompts: [{type: 'directory'.name: 'from'.message: 'Please select the file storage address'.basePath: path.join(__dirname, '.. /.. /src/views')}, {type: 'input'.name: 'fileName'.message: 'file name'.// Form validation
            validate: notEmpty('fileName')}, {type: 'input'.name: 'name'.message: 'name'.validate: notEmpty('name')},// The checkbox type can be used when multiple selections exist
        / / {
        // type: 'checkbox',
        // name: 'types',
        // message: 'api types',
        // choices: () => {
        // return ['create', 'update', 'get', 'delete', 'check', 'fetchList', 'fetchPage'].map((type) => ({
        // name: type,
        // value: type,
        // checked: true
        / /}))
        / /}
        / /}].actions: (data) = > {
        const { fileName, name, from } = data
        const filePath = path.join('src/views'.from, fileName + '.vue')
        const actions = [
            {
                type: 'add'.path: filePath,
                templateFile: 'template/page/index.hbs'.data: { name }
            }
        ]
        return actions
    }
}
Copy the code

The sample

module.exports = plop= > {
  // setGenerator can set up a generator, each generator can be used to generate a specific file
  // Accepts two parameters, the name of the generator and configuration options
  plop.setGenerator('component', {
    // The description of the generator
    description: 'create a component'.// Initiate a command line query
    prompts: [{
      / / type
      type: 'input'.// Accept arguments to variables
      name: 'name'.// Ask for prompt information
      message: 'component name'./ / the default value
      default: 'MyComponent'}].// Each object is an action object after completing the command line
    actions: [{
      // Action type
      type: 'add'.// Generate the output path of the file
      path: 'src/components/{{name}}/{{name}}.vue'.// template Specifies the path to the template file. The files in the directory comply with HBS syntax rules
      templateFile: 'plop-templates/component.vue.hbs'})}}]Copy the code

setGenerator

The plop object has a setGenerator method. This method is used to create a generator to help us generate a particular file. SetGenerator takes two parameters, name and option

  • Name: is the name of the generator and the command to execute it
  • Option: is an object that is a configuration option for the generator

Executive generator

The following example executes the generator we createdcomponent

Option, the description,

Description of the generator

prompts

The query that the future generator makes at work is an array, and each object is a query

prompts: [{
  / / type
  type: 'input'.// The variable name used to receive user input parameters will also be used in the HBS template in the future
  name: 'name'.// Ask for prompt information
  message: 'component name'./ / the default value
  default: 'MyComponent'}].Copy the code

actions

This is what happens after the command line query ends, and it is again an array of objects, each of which is an action object.

actions: [{ 
    // Action type
    type: 'add'.// Generate the output path of the file
    path: 'src/components/{{name}}/{{name}}.vue'.// Template is stored in the plop-templates directory in the root directory. The following files follow HBS syntax rules
    templateFile: 'plop-templates/component.vue.hbs' 
}]
Copy the code