https://github.com/337547038/vue-form-design
ak-design可视化低代码快速开发平台，使用基于vue3.x桌面端组件库 Elemnet-Plus，通过可视化的操作，可轻松快速完成拖拽表单编辑设计器、数据列表页设计、流程管理设计器、数据大屏可视化拖拽设计编辑器、数据统计拖拽设计；提供功能强大的各类组件，可适用于各种复杂场景，代码简洁、易于二次开发；用于学习研究，欢迎交流，微信：337547038
https://github.com/337547038/vue-form-design
ak-design echarts-design flow-design form-design screen vitejs vue3
Last synced: 27 days ago
JSON representation
ak-design可视化低代码快速开发平台，使用基于vue3.x桌面端组件库 Elemnet-Plus，通过可视化的操作，可轻松快速完成拖拽表单编辑设计器、数据列表页设计、流程管理设计器、数据大屏可视化拖拽设计编辑器、数据统计拖拽设计；提供功能强大的各类组件，可适用于各种复杂场景，代码简洁、易于二次开发；用于学习研究，欢迎交流，微信：337547038
- Host: GitHub
- URL: https://github.com/337547038/vue-form-design
- Owner: 337547038
- Created: 2021-06-07T12:26:58.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-05-08T12:38:59.000Z (about 1 month ago)
- Last Synced: 2025-05-08T13:41:43.150Z (about 1 month ago)
- Topics: ak-design, echarts-design, flow-design, form-design, screen, vitejs, vue3
- Language: Vue
- Homepage: https://337547038.github.io/vue-form-design/
- Size: 34 MB
- Stars: 303
- Watchers: 8
- Forks: 112
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AK-Design 可视化低代码快速开发平台
AK-Design 是一个纯前端的`拖拽式`、`可视化`、`低代码`数据可视化设计器开发平台，主包括表单设计、列表页设计、流程设计、数据可视化大屏设计、数据统计设计
使用基于 Vue 3.x 的桌面端组件库 Elemnet-Plus ，使用广泛，扩展方便
通过可视化的操作，可轻松快速完成表单设计、列表页设计、流程管理设计、数据可视化大屏设计、数据统计设计等页面的创建
提供功能强大的各类组件，可适用在各种复杂的场景中
**代码简洁、大众化写法、完整的注释、轻量易上手**
用于学习研究，欢迎交流，微信：**337547038**
如果项目对你有所帮助，请点赞+关注，以防迷路
如果你对该项目感兴趣，欢迎加入项目建设中来
如果你有任何建议，请联系我或在评论区留言
### 接受需求功能定制(微信:337547038)
### 演示地址
https://337547038.github.io/vue-form-design/
### 后端地址
https://github.com/337547038/ak-design-manage
### 微信交流群
群人数超出限制无法扫码加入，需入群请加微信 *337547038*
## 表单设计
一种可视化拖拽式表单设计编辑器，能够以图形化方式生成表单。通过它，可以以无需编写代码的方式来构建表单，并且可以为表单添加各种校验规则。
设计器具有易用性，且能够为应用程序快速生成美观的表单，提高开发效率。
设计器的主要功能：
- 提供功能强大丰富的各种表单组件
- 可以使用拖放方式添加表单元素
- 可以使用鼠标进行表单元素排序
- 可以设计器预设的校验规则
- 可以生成完整的表单视图
- 可以生成表单数据
- 可以根据表单数据自动生成UI
- 可以根据表单模板快速生成表单
- 可以支持复杂交互控制
- 可以支持开发自定义组件
- 支持接口数据处理
...
## 列表设计
列表设计器是一个可以帮助快速构建数据展示界面的工具，可以更加轻松地实现列表构建，提高我们的工作效率。简单的拖拽、调整列顺序、编辑列、设置样式等，生成自己想要的数据表格。
还可从设计的表单里获取接口数据。
列表设计器提供了丰富的配置项，你可以进行列的拖拽、设置列名、设置列宽、设置列样式等操作。同时，它还提供了丰富的配置项，充足的自定义能力，能够满足我们大部分的需求。
## 流程设计
## 数据可视化大屏设计
提供一种简单易用的拖拽式数据可视化大屏设计方案。编辑器提供了丰富的组件库和多种样式配置选项，可以帮助用户快速搭建并定制属于自己的数据可视化大屏。
包括图表组件、表格组件、进度条组件、地图组件、轮播组件、背景边框组件和常用辅助工具等，用户可以根据自己的需求选择和拖拽组件到画布中。
- 编辑器页面基本功能，包括编辑、预览、导出、保存、生成json脚本
- 图层功能：显示、隐藏、复制、锁定
- 组件功能：缩放、旋转、拖动、复制、组合、拆分、对齐方式、删除、位置定位
- 支持用户自定义组件
- 支持接口数据和静态模拟数据
- 支持键盘调整定位
## 数据统计设计
### 目录结构
```text
public
├─mock 模拟数据
src
├─api 数据请求接口
├─docs 使用说明文档
└─views 页面
├─design 表单设计主程序组件
├─components 公共组件
├─list 列表页设计
├─screen 数据大屏设计
├─datasource 数据源设计
├─flow 流程设计
└─form 表单设计
├─system 系统框架基本页面，导出vue文件示例
└─task 流程任务
```
### 启动项目
```Bash
# 克隆项目
git clone https://github.com/337547038/vue-form-design.git
# 安装依赖
pnpm install
# 运行项目
pnpm dev
# 使用json模拟数据
默认下github示例和localhost访问时使用json模拟数据。
# 使用后端接口数据
可访问后端库https://github.com/337547038/ak-design-manage
# 打包项目
pnpm build
```
### 开发环境
| 名称 | 版本 |
|--------------|---------|
| node | 20.18.x |
| pnpm | 9.12.x |
| vite | 5.4.x |
| vue | 3.5.x |
| element-plus | 2.8.x |
### 相关教程
[如何在本地调演示效果](https://www.bilibili.com/video/BV1xCYeeEEMS/?vd_source=bcdd3240479f23e6c5bf3c4159785b92)
## `Star`
非常感谢留下星星的好心人，感谢您的支持 :heart:
[](https://github.com/337547038/vue-form-design/stargazers)
## `Fork`
瞧，那些 `小哥哥` 、`小姐姐` 认真 `学习` 的样子真滴是 `哎呦不错哦` :heart:
[](https://github.com/337547038/vue-form-design/network/members)