什么是Avue
Avue.js是基于element-ui库进行的二次封装,从而简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易
亮点:
- 只需要配置简单的json属性,即可实现复杂的页面
- 配置不同的属性,实现不同的控件效果和业务逻辑(需要一个上传图片的功能,配置属性为upload,和图片上传后台接口即可)
- 配置字典接口,全局字典自动加载无需操心label和value值的对应
- 简单配置即可实现分步骤表单提交,多选项卡表单提交,等其他复杂的表单
- 不需要写大量html和css ,只需要一个json即可完成你的页面
- 解放手写大量重复crud和form表单功能,只要维护一个json就好
适合人群:
- 常年撸后端,对前端页面有恐惧心里
- 刚入门vue ,需要写- -些复杂的业务场景
- 干着大量重复的crud ,机械式劳动,浪费时间
- 前端小白,没用过很多框架,没有很多经验
安装配置
- 新建一个vue项目
- 安装element-plus、@smallwei/avue、axios
- 在main.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
import axios from 'axios'
import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(elementPlus)
app.use(Avue, { axios }).mount('#app')
使用
就像使用echarts一样,通过json数据来进行显示内容的配置
示例:
<template >
<avue-crud v-model="form" :option="option" @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel"></avue-crud>
</template>
<script setup>
import { ref, watch } from 'vue'
const option = ref(null)
const data = ref(null)
const form = ref({})
option.value = {
stripe: true,
selection: true,
showSummary: true,
column: [{
search: true,
label: '姓名',
prop: 'name',
}, {
label: '入职时间',
prop: 'time',
type: 'date'
}, {
label: '年龄',
prop: 'age',
type: 'number'
}, {
label: '性别',
prop: 'sex',
type: 'radio',
dicData: [{
label: '男',
value: 0
}, {
label: '女',
value: 1
}, {
label: '未知',
value: '未知'
}]
}, {
label: '离职状态',
prop: 'switch',
type: 'switch',
value: 1,
dicData: [{
label: '离职',
value: 0
}, {
label: '在职',
value: 1
}]
}]
}
watch(form, () => {
console.log(form, data);
})
data.value = [{
name: '张三',
age: 12,
sex: '未知',
switch: 1,
time: '2023-01-01'
}, {
name: '李四',
age: 13,
sex: 1,
switch: 1,
time: '2023-01-01'
}]
function rowSave(row, done, loading) {
done(row)
}
function rowDel(row, index, done) {
done(row)
}
function rowUpdate(row, index, done, loading) {
console.log(row);
done(row)
}
</script>
可以通过type来设置每一项的内容,具体参考:https://v3.avuejs.com/