【UI库】Vue3的ui库Avue（已完善官方组件案例代码！）

最新推荐文章于 2025-03-29 10:45:54 发布

十八朵郁金香

最新推荐文章于 2025-03-29 10:45:54 发布

阅读量757

点赞数 9

文章标签： ui vue.js elementui 前端

本文链接：https://blog.csdn.net/orbit4/article/details/145634088

版权

前言

最近处理的业务需求中，有一个vue3项目，其中用到了Avue这个ui库，也有着它的优点

Avue

提供完整的界面解决方案

其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 AVUE 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；

大量内置组件（50+），一站式解决

其它 UI 框架大部分都只有最通用的组件，如果遇到一些稍微不常用的组件就得自己找第三方，而这些第三方组件往往在展现和交互上不一致，整合起来效果不好，而 Avue 则内置大量组件，包括了表格、表单等业务组件，绝大部分中后台页面开发只需要了解 Avue 就足够了；

支持扩展

除了低代码模式，还可以通过自定义组件来扩充组件，实际上 Avue 可以当成普通 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，既提升了效率，又不失灵活性；

容器支持无限级嵌套

可以通过嵌套来满足各种布局及展现需求；

本篇文章演示Vue3项目如何使用avue中的组件。

一、安装工作

1、安装element-plus

npm install element-plus --save

2、安装avue

npm i @smallwei/avue -S

二、创建项目和配置

创建一个vue3项目（创建记得选择vue3）

vue create xx

一个初始化好的vue3项目目录如下

打开main.js，配置element-plus和avue

import { createApp } from 'vue';
import App from './App.vue';

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// 引入 Avue 组件库
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';

// 创建 Vue 应用
const app = createApp(App);

app.use(ElementPlus);
app.use(Avue);
app.mount('#app');

三、测试

1、Crud

这里我们首先选择了Crud组件

暂时不涉及全局配置和获取内置ref对象（可以忽略右下角的两个代码片段）

这里是Crud组件的一些参数，如图所框，就是一些比较常用的参数（属性）

点击Setup组合式用法，点击显示代码，可以直接使用。

1.1、文档的代码

将代码写在App.vue中

<template>
  {{form}}
  <avue-crud ref="crudRef"
             v-model="form"
             :option="option"
             @row-save="rowSave"
             @row-update="rowUpdate"
             @row-del="rowDel"
             :data="data"></avue-crud>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
//获取this
let { proxy } = getCurrentInstance()
const option = ref(null)
const data = ref(null)
const form = ref({})
option.value = {
  index: true,
  column: [{
    label: '姓名',
    prop: 'name'
  }, {
    label: '年龄',
    prop: 'sex'
  }]
}
data.value = [{
  id: 1,
  name: '张三',
  sex: 12
}, {
  id: 2,
  name: '李四',
  sex: 13
}]
function rowSave (row, done, loading) {
  done(row)
}
function rowDel (row, index, done) {
  done(row)
}
function rowUpdate (row, index, done, loading) {
  done(row)
}
</script>

查看运行结果

1.2、一些问题

可以正常显示

经过测试，发现一些功能（新增、编辑、删除）无法正常使用（因为官网没有提供）

比如，点击编辑，修改年龄后，点击“修改”，一直处于加载状态，没有关闭编辑表单，后续的逻辑肯定也没有实现。

2、Crud完善

这里对上述组件的代码完善（功能、逻辑、展示）

2.1、完善后的代码

html代码基本不变，把{{form}}去掉而已

<template>
  <avue-crud ref="crudRef"
             v-model="form"
             :option="option"
             @row-save="rowSave"
             @row-update="rowUpdate"
             @row-del="rowDel"
             :data="data"></avue-crud>
</template>

JS代码

<script setup>
import { ref } from 'vue';

// 定义 ref 变量
const crudRef = ref(null);
const option = ref(null);
const data = ref([]);
const form = ref({});

// 配置 option
option.value = {
  index: true,
  addBtn: true, // 显示新增按钮
  editBtn: true, // 显示编辑按钮
  delBtn: true, // 显示删除按钮
  column: [
    {
      label: '姓名',
      prop: 'name',
      rules: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ]
    },
    {
      // 修正 prop 为 age
      label: '年龄',
      prop: 'age',
      rules: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: Number, message: '年龄必须为数字值', trigger: 'blur' }
      ]
    }
  ]
};

// 初始化数据
data.value = [
  {
    id: 1,
    name: '张三',
    age: 12
  },
  {
    id: 2,
    name: '李四',
    age: 13
  }
];

// 新增保存方法
function rowSave(row, done, loading) {
  // 模拟生成新的 id
  row.id = Date.now();
  data.value.push(row);
  done();
  loading(false);
}

// 删除方法
function rowDel(row, index, done) {
  const currentIndex = data.value.findIndex(item => item.id === row.id);
  if (currentIndex!== -1) {
    data.value.splice(currentIndex, 1);
  }
  done();
}

// 编辑保存方法
function rowUpdate(row, index, done, loading) {
  const currentIndex = data.value.findIndex(item => item.id === row.id);
  if (currentIndex!== -1) {
    data.value[currentIndex] = { ...row };
  }
  done();
  loading(false);
}
</script>