Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/woai3c/visual-drag-demo
一个低代码（可视化拖拽）教学项目
https://github.com/woai3c/visual-drag-demo
Last synced: 24 days ago
JSON representation
一个低代码（可视化拖拽）教学项目
- Host: GitHub
- URL: https://github.com/woai3c/visual-drag-demo
- Owner: woai3c
- License: mit
- Created: 2020-12-16T12:45:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-30T05:43:05.000Z (7 months ago)
- Last Synced: 2024-01-14T01:00:39.941Z (5 months ago)
- Language: Vue
- Homepage: https://woai3c.github.io/visual-drag-demo
- Size: 14.5 MB
- Stars: 4,711
- Watchers: 62
- Forks: 1,417
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - visual-drag-demo
- awesome-data-visualization-solution - visual-drag-demo
- awesome-stars-coconut - woai3c/visual-drag-demo - 一个低代码（可视化拖拽）教学项目 (Vue)
- Awesome-GitHub-Repo - visual-drag-demo - 这个项目基于 Vue.js 技术栈，平台主页面分为四个部分，分别是工具栏、组件列表、画布、属性区域。将文字、图片等组件拖至画布区域。[<img src="https://tva1.sinaimg.cn/large/008i3skNly1gxlhtmg11mj305k05k746.jpg" alt="微信" width="18px" height="18px" />](https://mp.weixin.qq.com/s?__biz=MzUxNjg4NDEzNA==&mid=2247503159&idx=1&sn=3f6b3f79511e13feda4022d0771118c1&chksm=f9a21efeced597e8f38aeae6122da86f89c80171d09df20db9f6881a29dfe602921720be56d5&scene=21#wechat_redirect) (实战项目 / 低代码项目)
- awesome-list - visual-drag-demo - 一个低代码（可视化拖拽）教学项目。 (Web Development / C++/C Toolkit)
- awesome - woai3c/visual-drag-demo - 一个低代码（可视化拖拽）教学项目 (Vue)
- my-awesome-stars - woai3c/visual-drag-demo - 一个低代码（可视化拖拽）教学项目 (Vue)
- awesome-stars - woai3c/visual-drag-demo - 一个低代码（可视化拖拽）教学项目 (Vue)
- awesome - woai3c/visual-drag-demo - 一个低代码（可视化拖拽）教学项目 (Vue)
- StarryDivineSky - woai3c/visual-drag-demo
README
一个低代码平台的前端部分，靠拖拉拽生成页面。
## 功能点
这是本项目具有的功能点，如果想了解详情请参考本项目的四篇文档，每个功能点都有不同程度的描述以及动图帮助你理解。
1. 编辑器
1. 自定义组件（文本、图片、矩形、圆形、直线、星形、三角形、按钮、表格、组合）
1. 接口请求（通过接口请求组件数据）
1. 组件联动
1. 拖拽
1. 删除组件、调整图层层级
1. 放大缩小
1. 撤消、重做
1. 组件属性设置
1. 吸附
1. 预览、保存代码
1. 绑定事件
1. 绑定动画
1. 拖拽旋转
1. 复制粘贴剪切
1. 多个组件的组合和拆分
1. 锁定组件
1. 网格线
## 在线 DEMO
* [预览入口（Github）不翻墙可能速度慢](https://woai3c.github.io/visual-drag-demo)
## 文档
* [可视化拖拽组件库一些技术要点原理分析](https://github.com/woai3c/Front-end-articles/issues/19)
* [可视化拖拽组件库一些技术要点原理分析（二）](https://github.com/woai3c/Front-end-articles/issues/20)
* [可视化拖拽组件库一些技术要点原理分析（三）](https://github.com/woai3c/Front-end-articles/issues/21)
* [可视化拖拽组件库一些技术要点原理分析（四）](https://github.com/woai3c/Front-end-articles/issues/33)
* [低代码与大语言模型的探索实践](https://github.com/woai3c/Front-end-articles/issues/45)
## 开发
### 安装
```
npm i
```
### 运行
```
npm run dev
```
### 打包
```
npm run build
```
## License
MIT
## 赞助
如果你觉得本项目对你的帮助很大，可以请作者喝一杯奶茶🎁😉。
