Das Front-End erstellt eine Vorlage durch die Plop-Anweisung

Wenn Sie in der Vergangenheit Angular-Projekte entwickelt haben, um eine Komponente über die Angular-CLI zu erstellen, können Sie den Befehl ng generate component „component-name“ verwenden, diesen Befehl im Terminal ausführen, ein Ordner mit dem Namen „component-name“ wird unter erstellt Der Ordner enthält Folgendes: benannt nach Komponentenname

Komponentendateien <component-name>.component.tssteuern das Verhalten,

Vorlagendatei- <component-name>.component.htmlKontrollstruktur,

CSS-Datei zum  <component-name>.component.cssSteuern des Stils

So erstellen Sie über Angular-CLI-Anweisungen.Bei der Verwendung von Vue oder React verwenden wir im Allgemeinen die manuelle Erstellung, um xxx.vue-Komponenten zu erstellen usw. Der früher verwendete vue-element-admin kann auch für Projekte verwendet werden template über den npm-Befehl, und versuchen Sie dann, die Methode zum Erstellen einer Vorlage auf unser eigenes Projekt anzuwenden, um den gleichen Effekt zu erzielen

Installieren Sie zuerst plop, erstellen Sie die Ordner plopfile.js und plop-template, um automatisch Projektdateien zu erstellen

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

Erstellen Sie eine neue plopfile.js-Datei

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)
}
复制代码

Und fügen Sie eine Zeile "plop": "plop" zu Skripten in package.json hinzu und verwenden Sie sie später als Anweisung

Erstellen Sie einen neuen Plop-Template-Ordner und verwenden Sie die vue-element-admin-Vorlagendatei zur Verwendung.Interessierte Partner können zum Hintergrund des großen Mannes im Höschen gehen.

Nehmen Sie als Beispiel das Erstellen einer Komponente index.hbs als Vorlage

{{#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 wird ausgeführt, wenn die Komponentenkomponente erstellt wird

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
  }
}

复制代码

Wenn diese Vorbereitungsschritte abgeschlossen sind, können Sie npm run plop ausführen, um eine Vorlage zu erstellen, versuchen Sie, eine neue helloworld~

Dann wird die helloworld-Komponente erfolgreich erstellt und die Vorlage wird automatisch erstellt.Ich hoffe, dass dies die Produktivität verbessern kann.