Writing code is relatively boring, and the vast number of business code is even more boring. When realizing requirements, especially for some management platforms, there is nothing more than some forms, forms, popboxes, etc., the project uses Vue + Element-UI

  • Eg: Bullet frame is almost used in the business, the following 👇 template should be each bullet frame code can be common; Usually asked some friends and colleagues, most of them are copied before some requirements code, and then paste to delete, delete, change
<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: }}, methods: {onConfirm() {// TODO: write your code}, onClose() {// TODO: write your code }, onOpen() { // TODO: write your code } } } </script>Copy the code
  • Eg: Look at the form code again
<template> <el-form ref="form" class="form" :model="formModel" :rules="formRules" :label-width="labelWidth" > <el-form-item prop="label1" label=" form item 1" > < EL-input V-model ="formModel.label1" placeholder=" please input "> </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: 'not null'}]}}}, components: {// TODO: write your code label1: [{required: true, message: 'not null'}]}}}, 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>Copy the code

The solution

  • Node supports reading and writing files and command-line interaction.
  • NPM package is easy to manage, easy to install and use
  • Some apis and third-party libraries used in the process
    • Preset several sets of templates
    • Fs.writefilesync (file path, template string)
    • Inquirer, a third-party library, is particularly handy for command-line interaction, fetching user input

Method of use

  • Global installation: NPM i@bS-EAST/VUe-code-generate-g
  • vue-code-generate

  • Will automatically copy to the clipboard, paste can be

conclusion

  • Can you save 30 seconds?
  • Github project address