dragUI:免费把界面搭建变成拖 3 下就完事的可视化拖拽工具

📅 2026/8/22 21:16:08
dragUI:免费把界面搭建变成拖 3 下就完事的可视化拖拽工具
dragUI免费把界面搭建变成拖 3 下就完事的可视化拖拽工具【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI还在改一行代码就刷新一次、等半天才看到效果吗dragUI 是一个可视化拖拽编程工具左边拖组件中间手机预览秒变右边调样式做完还能自动生成一套 uni-app 项目代码。它解决什么问题告别写代码-刷新-等待用 uni-app 做小程序或 H5 页面时调一个高度、换个颜色都得保存、等编译、再刷新时间全耗在等待上。dragUI 把 UI 变成可拖拽的积木你在画布上拖放、点选、改属性界面实时预览代码最后自动生成。它不替代手写逻辑专治搭界面这一最重复的环节。核心能力速览这些功能帮你省掉什么实时预览拖一下、改个色手机预览立刻变省掉反复保存刷新的等待自动生成代码界面搭完一键导出完整 uni-app 工程省掉手写页面代码双组件库基础组件和 ColorUI 组件都能拖省掉切换设计风格的重做成本样式面板右侧可视化改 props 和样式省掉翻文档查属性名的时间项目导出压缩包整个工程打包成 zip方便备份版本和交给队友底层用了什么不需要你记的几样东西依赖库一句话作用vuedraggable让组件在画布里自由拖动、排序sortablejs拖拽排序的底层引擎ejs把拖出来的界面数据渲染成 uni-app 代码jszip file-saver把整个项目打包成压缩包供你下载适合谁用这 3 类人用得上新手入门不用先背熟 uni-app 写法先拖出一个能看的界面再回头学代码进阶开发者快速搭原型和页面骨架导出代码后接手继续写业务逻辑教学演示课堂上边拖边讲页面结构学生看着界面一步步长出来比念文档直观怎么开始用3 步走进编辑器执行git clone https://gitcode.com/gh_mirrors/dr/dragUI拉下项目然后打开 README.md 看目录结构按 uni-app 官方方式安装并运行到浏览器npm install装好依赖即可打开编辑器想自己加组件看看 templates/ 里的渲染模板照着现有组件写一份就行觉得顺手就先 Star 支持一下拖不出想要的效果或者发现样式面板不好用直接提个 PR。没头绪就看一遍 README.md 的数据结构部分十分钟就懂。【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考