When you were developing An Angular project, you used the Angular CLI to create a component with the command ng generate component “Component-name “, running this command on the terminal will create a folder named “component-name” with the following folder: component-name

Component file

.component.ts controls behavior,

Template file

.component.html control structure,

CSS file,

.component. CSS controls styles

This is done through Angular When using Vue or React, we usually create XXX. Vue components manually. The vue-element-admin command used in previous projects can also be used to create templates using NPM commands Our own projects to achieve the same effect

Install plop first, create plopfile.js and plop-template folder to automatically create project files

npm install --save-dev plop
Copy the code

Create the 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)
}
Copy the code

In package.json, add “plop”: “plop” to scripts

Create a new plop-template folder and use the vue-element-admin template file. If you are interested, you can go to the background of the big Guy

Take creating component as an example. Index. HBS is the template

{{#iftemplate}} <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}}

Copy the code

Prompt. Js is executed when the Component is created


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

module.exports = {
  description: 'generate vue component'./ / description
  prompts: [{
    type: 'input'.// Problem type
    name: 'name'.// In response to the questions entered in the answer, variables can be created using the component name
    message: 'component name please'./ / hint
    validate: notEmpty('name')// Check mode
  },
  // Other template content options, optional
  {
    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`.// The path to the new file
      templateFile: 'plop-templates/component/index.hbs'.// Select the path to the template file
      data: {
        name: name,
        template: data.blocks.includes('template'),
        script: data.blocks.includes('script'),
        style: data.blocks.includes('style')}}]return actions
  }
}

Copy the code

Once these steps are complete, you can run NPM Run plop to create the template. Try creating a new HelloWorld

The helloWorld component has been successfully created and the template has been automatically created