寫了個代碼生成工具,vue + element-ui的能夠來瞧瞧

寫代碼是比較枯燥的,茫茫多的業務代碼更加枯燥了,實現需求的時候,特別是一些管理平臺,無外乎一些表單、表格、彈框等,項目用的是vue + element-uijavascript

  • 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

  • 會自動複製到剪貼板,粘貼便可

結語

相關文章
相關標籤/搜索