目的
为了解决简单的CURD动作，减少Ctrl+c和 Ctrl+v动作，生成基础操作。一开始本打算写一个插件，后来发现不是很好扩展，且耦合性太强，各种个性化的需求太多，而Vue的继承并非很完善，尤其是Template的继承，干脆就采用生成代码的插件，简单暴力。
基于此目的，刚好学习一下webpack plugin开发。
开发
1. 定义插件入口，并合并配置参数
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. 定义参数解析和根据模板写入文件的方法
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. 实现service模板内容的获取
4. 实现view模板内容的获取
然后搞定！
如何使用
安装
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
})
]
}
}
参数说明
{
// `baseDir` 是要创建的文件根目录，默认为'./src'
baseDir: './src',
// `options` 是要创建的增删改查实例配置组成的数组
options: [{
// `name` 是当前实例的名称，必填，其值对应最终生成的文件名
name: 'project',
// `serviceDir` 是请求代码生成目录，默认为'/services',
serviceDir：'/services',
// `componentDir` 是template代码生成目录，默认值是'/views'
componentDir: '/views',
// `service` 是要生成的增删改查功能配置数组，默认为['list']
// 值只能为list,add,update,del 其他均不可识别。
// 可阅读源码，在 `/lib/ServiceTemplate`中加入自定义的请求模板
// 数组值可为字符串，也可为对象(如下所示)：
/* {
// `func` 值与上述数组中值对应
func:'list',
// `url` 值为http请求地址
url:'……'
} */
service: ['list', 'add', 'update', 'del'],
// `component` 是定义实例对应的数据model等相关配置
component: {
// `primaryKey` 是数据主键，删除、修改需要识别此值，默认为 'id'
primaryKey: 'id',
// `model` 是数据模板,必填
model: [{
//`name` 是该项数据对应前后端交互时对应的数据项标识
name: 'name',
//`text` 是该项数据前端显示的名称
text: '姓名',
//`isSearch` 标识是否为查询条件，默认为 false
isSearch: true,
//`isEdit` 标识是否为编辑/新增列，默认为 true
isEdit: true
}, {
name: 'sex',
text: '性别'
}, {
name: 'telephone',
text: '手机号码',
isSearch: true
}, {
name: 'email',
text: '邮箱'
}, {
name: 'address',
text: '地址',
isEdit: false
}]
}
}]
}
Clone Demo 使用
项目源代码在这里：curd-vue-element-plugin
