这是我的第一篇掘金博客，开启掘金写作之路。
一、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使用，毕竟它可以让开发者减少很多工作量。
