可视化拖拽搭建 UIdragUI 让鼠标拖出页面、即时预览、直接导出代码【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUIdragUI 是一款开源的可视化拖拽编程工具基于 uni-app 生态实现拖拽式 UI 搭建、实时预览并能把页面直接导出成完整的 uni-app 项目代码。对前端新手和小程序开发者来说用鼠标写页面就是它最大的吸引力。不想再等页面生效这是它想解决的痛点做小程序或 H5 页面时有个很常见的烦恼改一个高度、换一个颜色值都要保存、编译、刷新才能看到结果电脑慢一点这个循环就格外磨人。dragUI 的作者正是被这种等待逼出来的——他的诉求很直白改完马上看到效果最好还能靠拖组件来搭页面并且自动生成代码。于是 dragUI 把界面元素变成了可拖拽的对象布局、按钮、表单等组件都能在编辑区里随意摆放、调整顺序样式改动即时生效。你不再需要反复保存刷新写代码—等编译—看效果的来回等待被明显压缩。能力拆解拖页面、实时预览、导出 uni-app 代码️拖拽式搭建页面结构左侧面板提供布局组件Iflex 分栏布局和普通组件按钮、输入框、选项、图标、文本、进度条、开关等还有第三方 ColorUI 组件与表单组件。先拖入布局容器再往里面放子组件页面结构一层层长出来。⚡实时预览与属性编辑中间是手机屏模拟区页面即时渲染右侧面板可改组件的 props、样式和自定义字段顶部还有布局锁定、预览开关。几乎所有改动都会实时保存在浏览器里不怕中途丢稿。自动生成代码并导出项目你画出来的页面不只是演示——项目通过 EJS 模板渲染配合 jszip、file-saver 等压缩与下载库能把整个项目打包成可下载的 uni-app 代码压缩包拿到 IDE 里就能继续开发。如何快速体验可视化拖拽开发上手门槛不高按 uni-app 官方文档准备好开发环境执行npm install安装依赖运行到浏览器即可。想深入阅读源码可以先拉取仓库git clone https://gitcode.com/gh_mirrors/dr/dragUI体验路径很清晰在右侧面板创建项目 → 把布局组件拖进中间画布 → 依次放入按钮、输入框等组件 → 在属性面板微调 → 切到预览模式看整体效果 → 点击导出项目得到完整代码。如果只是想先玩玩也可以直接搜索项目演示在浏览器里拖一拖。适合谁使用学生、快速原型、教学场景学 uni-app 的学生能直观看到组件属性和页面结构的关系先建立组件长什么样的感性认识再回头读代码会轻松很多。需要快速原型的开发者做方案演示、产品评审或个人项目时可以先拖出屏幕骨架验证布局再导出代码继续迭代。编程教育与新手把写代码看页面变成拖组件看页面入门的心理门槛低不少。技术栈简单好扩展为什么值得关注dragUI 的核心依赖 Vue.Draggable基于 sortablejs 的拖拽排序组件库编辑界面使用 Element-UI代码生成靠 EJS 模板。整体结构小而清楚基础组件、渲染模板、数据结构各自独立成目录想加一个新组件或改导出模板照着现有模式动手并不吃力。作者在 README 里也坦承项目还有不少可以打磨的地方并公开邀请贡献者——新组件、更顺手的操作、更好的导出效果都是可以参与的方向。给新手的一句话建议如果你正在找一个低代码原型的切入点或者想试试用鼠标搭页面不妨拉下 dragUI 体验一轮拖拽搭建、实时预览、导出 uni-app 代码这三步全程在浏览器里完成过程本身就值得一看。【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考