dragUIuni-app可视化拖拽编程终极指南——如何用拖拽代替手写代码搭建小程序【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI想快速搭建小程序却被一堆.vue文件和upx样式劝退dragUI 是一个基于 Vue.Draggable uni-app 的可视化拖拽编程工具左边拖组件、中间实时预览、右边改样式保存即自动生成完整的小项目代码还能一键导出为可运行的 uni-app 工程支持自行导入第三方组件让零代码和可维护代码同时成立。为什么需要拖拽式小程序开发传统 uni-app 开发流程是写模板 → 改样式 → 保存 → 等编译 → 看效果。改一个按钮高度就要等一轮编译效率极低。dragUI 把这套流程压缩成了三步️拖从组件库把按钮、输入框拖进手机画布位置、层级即时生效调在右侧面板改 props 传值、边框、颜色、自定义类样式变更即时生效导出把整个项目打包成代码文件拿回开发者工具继续维护它不是生成一次性截图的玩具而是把拖拽结果落到真实的项目目录结构pages、components、App.vue、pages.json 等里导出后可继续用代码迭代。一键安装dragUI 快速上手克隆仓库git clone https://gitcode.com/gh_mirrors/dr/dragUI进入项目目录执行npm install依赖见 package.jsonsortablejs、jszip、file-saver、ejs、element-ui参考 uni 官方文档把项目运行到浏览器打开即可进入编辑界面整个编辑器只有一个页面 pages/index/index.vue左中右三栏布局区域负责文件作用左侧组件库components/LeftComponents/布局、普通、ColorUI、表单四类组件中间画布components/PhoneFrame/手机框拖拽区 实时预览右侧面板components/RightComponents/目录 / props / 属性 / 自定属性 / 指定类顶部工具条components/frameComponents/EuHeader.vue布局锁定、预览开关拖拽组件库四类组件覆盖常见页面左侧面板components/LeftComponents/LeftComponents.vue按折叠分组管理组件布局组件flex 布局骨架支持 2 列、3 列、四等分等多种比例flex-sub、flex-five等。注意必须先拖布局组件其他组件才能放进布局里普通组件按钮、输入框、选项、图标、文本、进度条、滑动选择、开关等源码位于components/basics/如 Ibutton.vue、Iimage.vueColorUI 组件轮播图、头像、卡片、时间线、导航栏等 12 个第三方组件components/colorUi/配套样式在colorui/main.css表单组件输入、单选、日期、时间、开关、上传图片等components/form/拖入画布后每个组件会附带三个快捷操作️ 删除、️ 预览选中、➕ 添加同级。右键还能呼出上下文菜单由common/js/vue-context-menu.js提供。右侧面板props 传值与样式一键修改选中组件后右侧面板提供 5 个标签页目录项目文件树 项目创建/导出/删除按钮数据源在 store/modules/project.jsprops组件传值面板components/RightComponents/styleCompentens/propsPanel.vue每个值可配置放在模板内联还是 data 变量里自动生成:propxxx绑定属性内联样式 已定义的 class 多选自定属性给组件加自定义属性指定类新建 CSS 类并绑定到组件所有编辑几乎都会实时保存到浏览器本地common/js/localStore.js刷新不丢稿。核心亮点自动生成 uni-app 项目代码这是 dragUI 的灵魂。导出时common/js/outExportFile.js流程为读取画布上的拖拽树数据每个组件的componentName、iStyle、iClass、propsValue用 EJS 模板templates/components.js、templates/project.js把数据渲染成标准.vue模板、样式和 data 变量用 jszip file-saver 打包成 zip 下载导出的不是看起来像代码的文本而是可直接在 HBuilderX / uni 工具里跑的工程pages/、components/、App.vue、main.js、pages.json一应俱全。也就是说拖拽只负责搭界面后续业务逻辑你照样用代码写两全其美。项目结构与扩展建议dragUI/ ├── common/js/ # 公共方法本地存储、导出、拖拽引擎 ├── components/ # 编辑器各面板 全部可拖拽组件 │ ├── basics/ # 基础组件 │ ├── colorUi/ # 第三方 ColorUI 组件 │ └── form/ # 表单组件 ├── templates/ # 代码生成模板EJS └── store/modules/ # Vuex项目数据、当前选中、编辑模式想加自己的组件只需两步在components/下新建组件文件参考basics/里的写法在common/js/importBasics.js相关注册处登记组件信息与默认 props组件元数据结构见 store/index.js 的componentsInfo这样你的私有组件就能出现在左侧组件库、被拖进画布、并参与代码导出——这正是自行导入第三方组件的实现思路。适合谁用小结使用场景dragUI 能帮什么小程序活动页 / 运营页拖完即导出半天上线一个页面uni-app 新手入门看导出代码学结构比啃文档直观原型验证拖拽 预览开关改完即所见团队组件复用自定义组件入库统一视觉规范dragUI 把改一行样式等一次编译的痛苦变成了拖一下、看一眼、导出去。项目仍处于活跃演进阶段官方READMEREADME.md也欢迎贡献者一起补充组件、完善自由度——如果你也被小程序开发流程折磨过这个可视化拖拽工具值得一试。【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考