フロントエンドは、plop命令を介してテンプレートを作成します

過去にAngularプロジェクトを開発する場合、Angular CLIを使用してコンポーネントを作成するには、コマンドng generate component "component-name"を使用し、ターミナルでこのコマンドを実行すると、"component-name"という名前のフォルダーが下に作成されます。フォルダには次のものが含まれます：component-nameにちなんで名付けられました

コンポーネントファイル<component-name>.component.tsは動作を制御し、

テンプレートファイル<component-name>.component.htmlの制御構造、

<component-name>.component.cssスタイリングを制御するCSSファイル

これは、Angular CLI命令を使用して作成する方法です。VueまたはReactを使用する場合、通常、手動作成を使用してxxx.vueコンポーネントなどを作成します。過去に使用したvue-element-adminは、プロジェクトにも使用できます。 npmコマンドを使用してテンプレートを作成し、テンプレートを作成する方法を独自のプロジェクトに適用して、同じ効果を達成してみてください

最初にplopをインストールし、plopfile.jsおよびplop-templateフォルダーを作成して、プロジェクトファイルを自動的に作成します

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

新しいplopfile.jsファイルを作成します

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

そして、package.jsonのスクリプトに「plop」：「plop」という行を追加し、後でそれを命令として使用します

新しいplop-templateフォルダーを作成し、vue-element-adminテンプレートファイルを使用して使用します。興味のあるパートナーは、パンティーの大物の背景に行くことができます。

テンプレートとしてindex.hbsの例としてコンポーネントを作成してみましょう

{{#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が実行されます


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

复制代码

これらの準備手順が完了したら、npm run plopを実行してテンプレートを作成し、新しいhelloworld〜を作成してみてください。

次に、helloworldコンポーネントが正常に作成され、テンプレートが自動的に作成されます。これにより、生産性が向上することを願っています。

フロントエンドは、plop命令を介してテンプレートを作成します

おすすめ