vue使用plop自动生成模板 高效率开发

vue使用plop自动生成模板

• 安装:npm install plop

• 修改vue配置：启动方式

  • package.json

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "plop": "plop"
    },
    

  • 如果不想修改安装全局plop：npm install -g plop

• vue根目录创建一个plop入口文件:plopfile.js

const routerGenerator = require('./plop-templates/router/prompt');	//指定一个模块目录（根据自己目录）

module.exports = function (plop) {
    plop.setGenerator('router', routerGenerator);//引入模块，可以多个
    //如果模块多个，启动时，控制台可以选择
};

• 创建一个模块

  • 根目录创建一个plop-templates文件夹—>router文件夹

    • prompt.js

    const { notEmpty } = require('../utils')	//自己定义的一个工具方法-后面会说
    
    module.exports = {
      description: 'generate a controller', //描述这个generate的作用
      prompts: [
        {
          type: 'input', // 问题的类型
          name: 'pathName', // 问题对应得到答案的变量名，可以在acitons中使用该变量
          message: '文件名称', // 在命令行中的问题
          validate: notEmpty('pathName')	//验证输入的值，notEmpty自定义的工具方法里验证
        },
          //这里可以多个，代表多个问题，依次执行
    /**    {
          type: 'input', // 问题的类型
          name: 'pathName2', // 问题对应得到答案的变量名，可以在acitons中使用该变量
          message: '文件名称2' // 在命令行中的问题
        }**/
      ],
        //执行的动作
      actions: (data) => {
        // 这里可以通过data获取输入的pathname
        const actions = [
            //这里创建一个文件
          {
            type: 'add', // 操作类型 添加文件
            path: `src/${data.pathName}.js`, //添加的文件的路径
            templateFile: 'plop-templates/router/index.hbs', //模版文件的路径（***这里就是想要生成的模板）
            data: {
              form: [{label:"值",key:"p1"}],
              isDel:true
            }
          }
        ]
        return actions
      }
    }
    

    • 模板index.hbs

    <template>
      <div class="center">
        <el-row>
          <el-button type="primary" size="mini" @click="add{{Api}}">新键</el-button>
          <el-button type="danger" size="mini" @click="delete{{Api}}">删除</el-button>
        </el-row>
        <el-table @selection-change="selectTable" border v-loading="loading" :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column type="selection" width="55" />
          {{#each form}}
          <el-table-column prop="{{this.key}}" label="{{this.label}}" width="180"> </el-table-column>
          {{/each}}
          <el-table-column fixed="right" label="操作" width="250">
            <template slot-scope="scope">
              <el-button @click="showEdit(scope.row)" type="primary" size="mini">查看</el-button>
           {{#if isDel}}
              <el-button type="danger" size="mini" @click="delete{{Api}}(scope.row)">删除</el-button>
           {{/if}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <script>
    
    export default {
      data() {
        return {
        }
      },
      mounted() {
      },
      methods: {
      }
    }
    </script>
    <style scoped lang="scss">
    
    </style>
    
    

    • #earch:循环数组,并默认this属于子项
    • #if:条件语句
    • 具体 Express模板引擎定制—hbs 的资料

  • plop-templates文件夹->utils.js

  //简单的验证下，输入的值
  //返回string：代表有错误信息，会显示再控制台
  //热会true：代表通过
  exports.notEmpty = (name) => {
      return (v) => {
          if (!v || v.trim === '') {
              return `${name}为必填项`
          } else {
              return true
          }
      }
  }
  

最后通过npm run plop 生成