目的

為了解決簡單的CURD動作惊豺，減少Ctrl+c和 Ctrl+v動作燎孟，生成基礎(chǔ)操作。一開始本打算寫一個插件尸昧，后來發(fā)現(xiàn)不是很好擴(kuò)展揩页，且耦合性太強(qiáng)，各種個性化的需求太多彻磁，而Vue的繼承并非很完善碍沐，尤其是Template的繼承，干脆就采用生成代碼的插件衷蜓，簡單暴力累提。
基于此目的，剛好學(xué)習(xí)一下webpack plugin開發(fā)磁浇。

開發(fā)

1. 定義插件入口斋陪，并合并配置參數(shù)

class CurdVueElementPlugin implements CurdVueElementPluginInterface {
  PluginParam: PluginParamInterface
  constructor(PluginParam: PluginParamInterface) {
    this.PluginParam = this.getOption(PluginParam)
  }
  apply(compiler: any) {
    compiler.plugin('environment', () => {
      this.execute()
    });
  }
  getOption(param: PluginParamInterface) {
    return Util.assign(DefaultPluginParam, param)
  }
  execute() {
    for (let opt of this.PluginParam.options) {
      let curdObj = new TemplateExecute(opt, this.PluginParam.baseDir)
      curdObj.execute()
    }
  }
}

2. 定義參數(shù)解析和根據(jù)模板寫入文件的方法

class TemplateExecute {
  constructor(param: OptionInterface) {
    //……
  }
  getOption(param: OptionInterface) {
    //……
  }
  writeService(/*path*/,/*content*/) {
    return serviceTemplate.getTemplate().then((res: any) => {
      return Util.writeTemplate(/*path*/,/*content*/)
    })
  }
  writeView(/*path*/,/*content*/) {
     return Util.writeTemplate(/*path*/,/*content*/)
  }
  execute() {
    this.writeService(/*path*/,/*serviceTemplate*/).then( () => {
      this.writeView(/*path*/,/*viewTemplate*/);
    });
  }
}

3. 實(shí)現(xiàn)service模板內(nèi)容的獲取

4. 實(shí)現(xiàn)view模板內(nèi)容的獲取

然后搞定！

如何使用

安裝

npm install curd-vue-element-plugin -D

配置

webpack配置文件中

const CurdVueElementPlugin = require('curd-vue-element-plugin')
module.exports = {
  plugins: [
    new CurdVueElementPlugin({
      //……options  
    })
  ]
}

Vue-Cli配置文件中

/* vue.config.js */
const CurdVueElementPlugin = require('curd-vue-element-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new CurdVueElementPlugin({
        //……options
      })
    ]
  }
}

參數(shù)說明

{
  // `baseDir` 是要創(chuàng)建的文件根目錄置吓，默認(rèn)為'./src'
  baseDir: './src', 
  // `options` 是要創(chuàng)建的增刪改查實(shí)例配置組成的數(shù)組
  options: [{
    // `name` 是當(dāng)前實(shí)例的名稱无虚，必填，其值對應(yīng)最終生成的文件名
    name: 'project',
    // `serviceDir` 是請求代碼生成目錄衍锚，默認(rèn)為'/services',
    serviceDir：'/services',
    // `componentDir` 是template代碼生成目錄友题，默認(rèn)值是'/views'
    componentDir: '/views',
    // `service` 是要生成的增刪改查功能配置數(shù)組，默認(rèn)為['list']
    // 值只能為list,add,update,del 其他均不可識別戴质。
    // 可閱讀源碼度宦，在 `/lib/ServiceTemplate`中加入自定義的請求模板
    // 數(shù)組值可為字符串，也可為對象(如下所示)：
    /*  { 
          // `func` 值與上述數(shù)組中值對應(yīng)
          func:'list',
          // `url` 值為http請求地址
          url:'……'
        } */
    service: ['list', 'add', 'update', 'del'],
    // `component` 是定義實(shí)例對應(yīng)的數(shù)據(jù)model等相關(guān)配置
    component: {
      // `primaryKey` 是數(shù)據(jù)主鍵告匠，刪除戈抄、修改需要識別此值，默認(rèn)為 'id'
      primaryKey: 'id',
      // `model` 是數(shù)據(jù)模板,必填
      model: [{
        //`name` 是該項數(shù)據(jù)對應(yīng)前后端交互時對應(yīng)的數(shù)據(jù)項標(biāo)識
        name: 'name',
        //`text` 是該項數(shù)據(jù)前端顯示的名稱
        text: '姓名',
        //`isSearch` 標(biāo)識是否為查詢條件后专，默認(rèn)為 false
        isSearch: true,
        //`isEdit` 標(biāo)識是否為編輯/新增列划鸽，默認(rèn)為 true
        isEdit: true
      }, {
        name: 'sex',
        text: '性別'
      }, {
        name: 'telephone',
        text: '手機(jī)號碼',
        isSearch: true
      }, {
        name: 'email',
        text: '郵箱'
      }, {
        name: 'address',
        text: '地址',
        isEdit: false
      }]
    }
  }]
}

Clone Demo 使用
項目源代碼在這里：curd-vue-element-plugin