还在手写重复的界面用免费可视化工具 dragUI 三步搭出 uni-app 页面【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI做小程序或 H5 页面时你大概经历过这种循环改一行高度保存等编译刷新浏览器再看一眼——不满意再来一遍。时间大都耗在等待上。dragUI 针对的就是这个问题它基于 Vue.Draggable 和 uni-app把界面开发变成可视化拖拽编程组件拖进手机画布即改即现完成后还能自动生成完整项目代码。画布拖拽改完立即可见左侧组件面板里按钮、输入框、文本、开关、进度条可以直接拖到中间的手机画布布局组件先撑出格子其他组件放格子里。右侧面板改 props、属性、样式画布同步更新不必反复保存编译。对开发节奏来说最直接的收益就是省掉改一行、等一次的等待。组件库内置三套也能自己加面板内置基础组件、ColorUI 组件和表单组件导航栏、卡片、时间线、轮播图、单选、日期时间选择等常见需求开箱即用。面板还分默认和自定义两个 Tabcomponents/ 目录下新增一个组件、写清 props 描述它就能出现在拖拽列表里——想接第三方组件库时扩展成本很低。导出的不是截图是能跑的项目代码画布搭完点右侧面板的导出项目EJS 模板把每个组件渲染成 Vue 代码JSZip 打包成压缩包FileSaver 触发下载拿到的是一份可直接运行的 uni-app 工程。编辑状态会实时保存在本地中途关掉浏览器回来接着改也不丢进度。技术栈一览依赖 / 组件负责什么Vue.Draggable SortableJS组件拖拽、移动、排序EJS按模板把拖拽数据渲染成 Vue 代码JSZip FileSaver导出、下载完整项目压缩包Element-UI编辑器外壳界面vue-context-menu画布右键菜单删除、调整层级Vuex项目、页面、组件数据统一管理谁适合用它前端新手不熟 uni-app 结构也能先拖按钮、文本、表单出效果直观理解页面结构。资深开发者原型和简单页面快速成型省掉样板代码精力留给业务逻辑。教育者课堂上现场拖出界面学生看的是真实组件和实时效果比讲代码更直观。最快上手路径用 HBuilderX 创建或运行 uni-app 项目入口是 pages/index/index.vue仓库地址https://gitcode.com/gh_mirrors/dr/dragUI 克隆后执行npm install拖组件搭页面顶部开关切换编辑 / 预览右键可删除或调整层级完成后导出项目。和在线拖拽工具有什么不同大多数在线工具导出的是私有格式或网页片段dragUI 直接生成可导入本地 IDE 的 uni-app 工程代码归你后续想怎么改就怎么改。项目还有不少可以打磨的地方作者也写在仓库里了。欢迎提 issue 或提交 PR一起把它补全。【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考