The front-end creates a template through the plop instruction

When developing angular projects in the past, to create a component through Angular CLI, you can use the command ng generate component "component-name", run this command in the terminal, a folder named "component-name" will be created, under the folder Contains the following: named after component-name

component files <component-name>.component.tscontrol behavior,

template file <component-name>.component.htmlcontrol structure,

CSS file to  <component-name>.component.csscontrol styling

This is the way to create through Angular CLI instructions. When using Vue or React, we generally use manual creation to create xxx.vue components, etc. The vue-element-admin used in the past can also be used for projects. Create a template through the npm command, then try to apply the method of creating a template to our own project to achieve the same effect

First install plop, create plopfile.js and plop-template folders to automatically create project files

npm install --save-dev plop
复制代码

Create a new plopfile.js file

const viewGenerator = require('./plop-templates/view/prompt')
const componentGenerator = require('./plop-templates/component/prompt')
const storeGenerator = require('./plop-templates/store/prompt.js')

module.exports = function(plop) {
  plop.setGenerator('view', viewGenerator)
  plop.setGenerator('component', componentGenerator)
  plop.setGenerator('store', storeGenerator)
}
复制代码

And add a line "plop": "plop" to scripts in package.json, and use it as an instruction later

Create a new plop-template folder and use the template file of vue-element-admin for use. Interested partners can go to the background of the big panty pants to view

Take creating a component as an example index.hbs as a template

{{#if template}}
<template>
  {{!-- html --}}
  <div />
</template>
{{/if}}

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

{{#if style}}
<style lang="scss" scoped>

</style>
{{/if}}

复制代码

prompt.js is executed when the component component is created

const { notEmpty } = require('../utils.js')

module.exports = {
  description: 'generate vue component',//描述
  prompts: [{
    type: 'input',//问题类型
    name: 'name',//回应问题输入的答案,可做变量使用创建为组件名
    message: 'component name please',//提示
    validate: notEmpty('name')//校验方式
  },
  //其他模板内容选项,可选项
  {
    type: 'checkbox',
    name: 'blocks',
    message: 'Blocks:',
    choices: [{
      name: '<template>',
      value: 'template',
      checked: true
    },
    {
      name: '<script>',
      value: 'script',
      checked: true
    },
    {
      name: 'style',
      value: 'style',
      checked: true
    }
    ],
    validate(value) {
      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
        return 'Components require at least a <script> or <template> tag.'
      }
      return true
    }
  }
  ],
  actions: data => {
    const name = '{{properCase name}}'
    const actions = [{
      type: 'add',
      path: `src/components/${name}/index.vue`,//新增文件的路径
      templateFile: 'plop-templates/component/index.hbs',//选择模板文件的路径
      data: {
        name: name,
        template: data.blocks.includes('template'),
        script: data.blocks.includes('script'),
        style: data.blocks.includes('style')
      }
    }]

    return actions
  }
}

复制代码

When these preparation steps are completed, you can run npm run plop to create a template, try to create a new helloworld~

Then the helloworld component is successfully created and the template is automatically created. I hope this can improve the productivity.