介绍
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 协议。
