AvueAvue
首页
  • 开发指南
  • Skill开发
  • 在线测试工具
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
产品
工作台
授权
联系
2.x文档
个人支付接口
首页
  • 开发指南
  • Skill开发
  • 在线测试工具
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
产品
工作台
授权
联系
2.x文档
个人支付接口
  • 介绍
  • 更新日志
  • 贡献指南
  • 快速上手
  • 组件与依赖索引
  • Skill 开发指南
  • TypeScript 使用
  • 全局配置
  • 国际化
  • 全局 API
  • Option 配置校验
  • 在线测试工具
  • 远程协助
  • 企业须知

介绍

Avue 是基于 Vue 3 和 Element Plus 的组件库,通过配置生成表单、表格和常见业务界面。将字段名称、控件类型、字典和校验集中在 option 中,可以减少重复的模板代码。

先理解三个部分

部分负责什么常见写法
配置字段、布局、控件和操作按钮:option="option"
数据表单值和表格记录v-model="form"、:data="data"
事件和插槽请求接口、保存结果、定制展示@submit、@row-save、具名插槽

例如一个部门字段,可以用同一份字典在表单中显示下拉选项、在表格中显示部门名称。接口请求、权限判断以及业务规则由应用实现,Avue 负责对应的组件交互和展示。

配置与 Vue 一起使用

基础页面主要通过配置完成;需要联动、接口请求或自定义交互时,仍会使用 JavaScript、Vue 的响应式状态和事件。配置中的函数也意味着它不总是可直接序列化的 JSON。

适合哪些页面

  • 信息管理:通过 CRUD 组合表格、搜索、分页和编辑表单。
  • 业务录入:通过 Form 配置校验、分组、联动、子表单和自定义字段。
  • 配置驱动的重复页面:复用字段和字典定义,用少量差异配置组织相似页面。
  • 逐步接入的 Vue 项目:可以单独使用一个表单或表格,再按需要扩展。

高度定制的视觉页面、画布编辑器或特殊交互,可以由应用自行编写 Vue 组件,再通过插槽和自定义组件与 Avue 组合。无需把所有界面都转换成配置。

如何阅读示例

每个示例先说明用途和关键配置,再提供可以操作的预览。点击“展开源码”查看完整组件,点击“复制代码”用于自己的项目。涉及拖拽、分页或级联时,按说明操作并观察下方结果区,确认数据与界面的变化。

示例中的本地数据用于演示交互;接入业务系统时,请替换成项目自己的请求和数据结构。需要额外依赖、字典接口或版本支持的示例会在对应页面说明。

从这里开始

你想完成的事情阅读入口
安装组件库,运行第一个页面快速上手
查找组件标签、导出名和额外依赖组件与依赖索引
单独使用输入组件,核对值和事件基础组件通用用法
新建表单、配置字段和校验Form 组件
创建带搜索和分页的管理表格CRUD 组件
配置字典和上下级联动表单字典、字段联动
升级并核对行为变化更新日志

参与项目

发现问题时,可以提交 Issue,附上 Avue、Vue、Element Plus 的版本、最小复现代码、操作步骤以及预期结果。准备贡献代码时,请先阅读贡献指南。

本项目使用 MIT 协议。

最后更新:
贡献者: smallwei
Next
更新日志