一、Avue是啥？
Avue 是一個基於Element框架低代碼前端框架，它使用 JSON 配置來生成頁面，可以減少頁面開發工作量，極大提升效率。
二、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使用
<template>
<div id="app">
<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>
</div>
</template>
<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 {
searchMenuSpan: 8,
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",
search: true
},
{
label: "性別",
prop: "sex"
}
]
};
}
}
};
</script>
運行截圖
各種操作的案例
<template>
<div id="app">
權限開關
<el-switch
:active-value="false"
:inactive-value="true"
v-model="text"
active-color="#13ce66"
inactive-color="#ff4949"
/>
<avue-crud
:page.sync="page"
:data="data"
:permission="permission"
:option="option"
:before-open="beforeOpen"
@row-save="rowSave"
@row-del="rowDel"
@on-load="onLoad"
@search-change="searchChange"
>
<template slot-scope="{row,index}" slot="menuForm">
<el-button
type="primary"
icon="el-icon-check"
size="small"
plain
v-show="type === 'add'"
>繼續添加{{index}}</el-button>
</template>
</avue-crud>
</div>
</template>
<script>
export default {
data() {
return {
page: {
pageSize: 2,
currentPage: 1
},
data: [
{
name: "張三",
sex: "男",
$cellEdit: true
},
{
name: "李四",
sex: "女"
},
{
name: "王五",
sex: "女"
},
{
name: "趙六",
sex: "男"
}
],
text: false,
permission: {
viewBtn: true
},
type: ""
};
},
computed: {
option() {
return {
card: true,
tip: false,
selection: true,
editBtn: true,
viewBtn: true,
searchMenuSpan: 8,
showHeader: true,
index: true,
size: "small",
align: "center",
menuAlign: "center",
column: [
{
dicData: [{ label: "王五", value: "男" }],
filters: true,
filterMethod: function(value, row) {
return row.sex === value;
},
sortable: true,
label: "姓名",
prop: "name",
search: true,
cell: true,
rules: [
{
required: true,
message: "請輸入姓名",
trigger: "blur"
}
]
},
{
label: "性別",
prop: "sex",
formatter: function(row) {
return row.name + "自定義";
},
type: "radio",
dicData: [
{
label: "顯示",
value: 0
},
{
label: "隱藏",
value: 1
}
]
},
{
hide: true,
cell: true,
label: "省份",
prop: "province",
type: "select",
search: true,
props: {
label: "name",
value: "code"
},
dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
dicFormatter: (res) => {
// 接口設計正確就可以不用這個
console.log(res.data)
return res.data
},
rules: [
{
required: true,
message: "請選擇省份",
trigger: "blur"
}
]
}
]
};
}
},
methods: {
onLoad(page) {
console.log("分頁信息:", page);
this.page.total = 100;
},
searchChange(params, done) {
console.log("--params", params);
setTimeout(() => {
done();
}, 2000);
},
rowSave(form, done) {
this.$message.success("新增數據" + JSON.stringify(form));
done();
},
beforeOpen(done, type) {
this.type = type;
done();
},
rowDel() {
this.$message.success('del')
}
},
watch: {
text() {
if (this.text === true) {
this.permission.viewBtn = false;
} else {
this.permission.viewBtn = true;
}
}
}
};
</script>
四、Avue優/缺點
優點：
1.僅需一個json自動生成增刪改查頁面
2.結合業務快速化開發，節約開發時間成本
缺點:
1.大量定制 UI
JSON 配置使得 Avue 更適合做有大量常見 UI 組件的頁面，但對於面向普通客戶（toC）的頁面，往往追求個性化的視覺效果，這種情況下用 Avue 就不合適，實際上絕大部分前端 UI 組件庫也都不適合，只能定制開發。
2.極為復雜或特殊的交互
有些復雜的前端功能，比如 可視化編輯器，其中有大量定制的拖拽操作，這種需要依賴原生 DOM 實現的功能無法使用 Avue。
五、總結
如果只是內部使用的管理系統 or OA系統，可以使用Avue進行開發，涉及到的自定義組件無需過多。如果是對外的大型管理系統，有特殊定制化的項目，可以結合Avue使用，畢竟它可以讓開發者減少很多工作量。