一、Avue是啥？
Avue 是一个基于Element框架低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。
不需要懂前端
大部分 Avue 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的。
不受前端技术更新的影响
当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 Avue，现在的维护成本会很高。
二、Avue安装
安装
通过npm安装
#安装 npm i @smallwei/avue -S yarn add @smallwei/avue -S # 引入 import Avue from '@smallwei/avue'; import '@smallwei/avue/lib/index.css'; Vue.use(Avue); 复制代码
通过CDN安装
<!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css" /> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> <!-- 引入相关JS 文件 --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/avue.min.js"></script> <div id="app"></div> <script> // 在 #app 标签下渲染一个按钮组件 new Vue({ el:'app', data(){ return{} } }); app.use(AVUE); </script> 复制代码
通过脚手架安装
# 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world # 创建完成后，可以通过命令打开图形化界面，如下图所示 vue ui 在图形化界面中，点击 依赖 -> 安装依赖，然后将 @smallwei/avue 添加到依赖中即可。 复制代码
三、Avue使用
Crud组件
<el-row style="margin-bottom:20px;font-size:15px"> <el-col :span="4">显示边框: <el-switch size="small" v-model="showBorder"> </el-switch></el-col> <el-col :span="4">显示斑马纹: <el-switch size="small" v-model="showStripe"> </el-switch></el-col> <el-col :span="4">显示索引: <el-switch size="small" v-model="showIndex"> </el-switch></el-col> <el-col :span="4">显示多选框: <el-switch size="small" v-model="showCheckbox"> </el-switch></el-col> <el-col :span="4">显示表头: <el-switch size="small" v-model="showHeader"> </el-switch></el-col> </el-row> <el-row style="margin-bottom:20px"> <el-radio-group v-model="sizeValue"> <el-radio label="small">默认</el-radio> <el-radio label="medium">medium</el-radio> <el-radio label="small">small</el-radio> <el-radio label="mini">mini</el-radio> </el-radio-group> </el-row> <avue-crud :data="data" :option="option0"></avue-crud> <script> export default { data() { return { obj:{}, data: [ { name:'张三', sex:'男' }, { name:'李四', sex:'女' }, { name:'王五', sex:'女' }, { name:'赵六', sex:'男' } ], showBorder: false, showStripe: false, showHeader: true, showIndex: true, showCheckbox: false, showPage:false, sizeValue:'small' } }, computed: { option0(){ return{ border:this.showBorder, stripe:this.showStripe, showHeader:this.showHeader, index:this.showIndex, size:this.sizeValue, selection:this.showCheckbox, page:this.showPage, align:'center', menuAlign:'center', column:[ { label:'姓名', prop:'name' }, { label:'性别', prop:'sex' } ] } } } } </script> 复制代码
Form组件
<el-row style="margin-bottom:20px"> <el-radio-group v-model="sizeValue"> <el-radio label="small">默认</el-radio> <el-radio label="medium">medium</el-radio> <el-radio label="small">small</el-radio> <el-radio label="mini">mini</el-radio> </el-radio-group> </el-row> <avue-form ref="form" v-model="obj" :option="option" @reset-change="emptytChange" @submit="submit"> <template slot-scope="scope" slot="menuForm"> <el-button @click="tip">自定义按钮</el-button> </template> </avue-form> <script> var DIC = { VAILD: [{ label: '真', value: 'true' }, { label: '假', value: 'false' }], SEX: [{ label: '男', value: 0 }, { label: '女', value: 1 }] } export default { data() { return { obj:{}, sizeValue:'small' } }, computed: { option(){ return{ size:this.sizeValue, mockBtn:true, submitText: '完成', printBtn:true, column: [{ label: "用户名", prop: "username", tip: '这是信息提示', span: 8, maxlength: 3, suffixIcon: 'el-icon-tickets', prefixIcon: 'el-icon-tickets', minlength: 2, mock:{ type:'name', en:true, }, rules: [{ required: true, message: "请输入用户名", trigger: "blur" }], click:({value,column})=>{ this.$message.success('click') } }, { label: "姓名", prop: "name", disabled:true, mock:{ type:'name' }, span:8 }, { label: "密码", prop: "password", type:'password', mock:{ type:'name' }, span:8 }, { label: "类型", prop: "type", type: "select", dicData: DIC.VAILD, span:6, mock:{ type:'dic', }, }, { label: "权限", prop: "grade", span: 6, type: "checkbox", dicData: DIC.VAILD, mock:{ type:'dic', }, }, { label: "开关", prop: "switch", span: 6, type: "switch", dicData: DIC.SEX, mock:{ type:'dic' }, hide: true, row:true, }, { label: "性别", prop: "sex", span: 6, type: "radio", dicData: DIC.SEX, mock:{ type:'dic' } }, { label: "数字", prop: "number", type: 'number', span: 6, precision:2, mock:{ type:'number', max:1, min:2, precision:2 }, minRows: 0, maxRows: 3, row:true, }, { label: "网站", span: 12, prop: "url", prepend:'http://', mock:{ type:'url', header:false, }, append:'com', row:true, }, { label: "日期", prop: "date", type: "date", span:8, format:'yyyy-MM-dd', valueFormat:'yyyy-MM-dd', mock:{ type:'datetime', format:'yyyy-MM-dd' }, }, { label: "日期时间", prop: "datetime", type: "datetime", span:8, format:'yyyy-MM-dd hh:mm:ss', valueFormat:'yyyy-MM-dd hh:mm:ss', mock:{ type:'datetime', format:'yyyy-MM-dd hh:mm:ss', now:true, }, }, { label: "时间", prop: "time", type: "time", span:8, format:'hh:mm:ss', valueFormat:'hh:mm:ss', mock:{ type:'datetime', format:'hh:mm:ss' }, }, { label: "地址", span: 24, prop: "address", mock:{ type:'county' }, },{ label: "建议", span: 24, prop: "adit", mock:{ type:'word', min:10, max:30 }, }] } } }, mounted(){ this.obj={ username :'smallwei', switch:0, phone:'17547400800' } }, methods:{ emptytChange(){ this.$message.success('清空方法回调'); }, submit () { this.$message.success('当前数据'+JSON.stringify(this.obj)); }, tip(){ this.$message.success('自定义按钮'); } } } </script> 复制代码
四、Avue缺点
大量定制 UI
JSON 配置使得 Avue 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 Avue 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。
极为复杂或特殊的交互
有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 Avue。
五、总结
如果只是内部使用的管理系统 or OA系统，可以使用Avue进行开发，涉及到的自定义组件无需过多。如果是对外的大型管理系统，有特殊定制化的项目，可以结合Avue使用，毕竟它可以让开发者减少很多工作量。
