写了个代码生成工具,vue + element-ui的可以来瞧瞧

1,641 阅读1分钟

写代码是比较枯燥的,茫茫多的业务代码更加枯燥了,实现需求的时候,特别是一些管理平台,无外乎一些表单、表格、弹框等,项目用的是vue + element-ui

  • eg: 弹框在业务里面几乎是都会用到,下面👇这个模版应该是每个弹框的代码都可以公用;平时问了一些朋友同事,大部分都是复制下之前实现的一些需求代码,然后粘贴出来删删改改
<template>
    <el-dialog
        :title='dialogTitle'
        :visible.sync='innerVisible'
        @confirm='onConfirm'
        @close='onClose'
        @open='onOpen'
    >
        <!--XXX-->
    </el-dialog>
</template>

<script>
export default {
    props: {
        visible: {
          type: Boolean,
          default: false
        }
    },
    computed: {
        innerVisible: {
          get() {
            return this.visible
          },
          set(newVal) {
            this.$emit('update:visible', newVal)
          }
        },
        dialogTitle() {
          // TODO: write your code
          return '弹框标题'
        }
    },
    methods: {
        onConfirm() {
          // TODO: write your code
        },
        onClose() {
          // TODO: write your code
        },
        onOpen() {
          // TODO: write your code
        }
    }
}
</script>
  • eg: 再来看下表单代码
<template>
  <el-form
    ref="form"
    class="form"
    :model="formModel"
    :rules="formRules"
    :label-width="labelWidth"
  >
    <el-form-item
      prop="label1"
      label="表单项1"
    >
      <el-input
        v-model="formModel.label1"
        placeholder="请输入"
      >
      </el-input>
    </el-form-item>
    <el-button
      type="primary"
      @click="onSubmit"
    >
    </el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      labelWidth: "100px"
      formModel: {
        // TODO: write your code
        label1: undefined
      },
      formRules: {
        // TODO: write your code
        label1: [
          { required: true, message: '不可为空' }
        ]
      }
    }
  },
  components: {
    // TODO: write your code
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        // TODO: write your code
      })
    }
  },
  computed: {
    // TODO: write your code
  }
}
</script>

解决方式

  • node 支持读写文件,命令行交互;
  • npm包管理方便,安装使用非常方便
  • 过程中主要用到的一些api和第三方库
    • 预置几套模版
    • fs.writeFileSync(文件路径, 模版字符串)
    • inquirer 这个第三方库 命令行交互特别方便,获取用户输入

使用方法

  • 全局安装:npm i @bs-east/vue-code-generate -g
  • vue-code-generate

  • 会自动复制到剪贴板,粘贴即可

结语