用鼠标得到一个 uni-app 项目dragUI 可视化拖拽编程上手指南【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUIdragUI 是一个构建在 uni-app 之上的可视化拖拽编程工具在浏览器里把组件拖到画布上搭页面效果实时刷新最后还能把整个项目连同代码一起导出。它解决的是改一行代码 → 保存 → 等编译 → 才能看效果的反复循环适合想快速搭原型、做低保真页面的开发者也适合刚开始学 uni-app 的新手。dragUI 界面长什么样打开后是一个三区布局各司其职左侧组件库分成布局组件、普通组件按钮、输入框、文本、图片、进度条等、ColorUI 组件导航栏、卡片、步骤条、时间线等和表单组件四组按默认/自定义分类浏览中间画布组件落点即渲染不用保存、不用刷新右侧工程面板能直接看到生成项目的目录结构pages、components、manifest.json、pages.json 等选中任意组件后可以编辑 props、属性和自定义样式。顶部提供编辑模式下拉框以及布局锁定预览两个开关。README 里还配了一张带标注的图标出了各区域的边界拖拽组件三步上手从本地运行到导出代码第一步在浏览器里跑起来dragUI 本身就是一个普通 uni-app 项目克隆仓库后装好依赖按 uni 官方流程运行到浏览器即可git clone https://gitcode.com/gh_mirrors/dr/dragUI cd dragUI npm install第二步建项目先拖布局在右侧面板点创建项目。开始排版前只有一条规则先拖布局组件上画布普通组件只能放进布局的格子里。布局组件像网格一样把画布分成若干槽位把按钮拖进其中一格中间画布立刻出现一枚蓝色按钮。第三步改属性、开预览、导出工程选中按钮右侧面板切到编辑态把文案改成 hello world在属性里调颜色、尺寸每次修改即时生效。顺手把右上角预览开关打开就能看到最终的展示效果。项目数据基本实时保存在浏览器本地关掉页面也不会丢。搭好后点右侧导出项目会得到一个完整 uni-app 工程的压缩文件解出来就是可以直接运行的代码工程。️ dragUI 值得用的四个能力实时预览改动即时反映在浏览器里省掉保存和编译的等待迭代节奏完全不一样自动生成代码所见即所得导出的交付物是标准 uni-app 工程而不是绑定专有运行时的私有格式一键导出工程基于 jszip file-saver 把整个项目打包成压缩文件方便协作、备份和版本管理支持导入第三方组件内置 ColorUI 组件集和常用表单组件源码的 components/ 目录也方便你按现有套路扩充自己的组件。这类可视化拖拽工具适合谁用学 uni-app / 小程序的新手先用拖拽把页面搭出来建立结构直觉再对照导出的代码看组件是怎么对应的需要快速出原型的开发者做需求演示、低保真页面时省掉先写代码再看效果的弯路有现成组件想接入的人组件库是数据驱动的照着已有组件的模式可以把第三方组件挂进左侧面板。作者自己也坦言项目还不算成熟稳定upx 单位在桌面端换算这类细节仍有局限。觉得有用的话去把玩一下、提个 issue 或者点个 star都是帮它变好的方式。【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用鼠标得到一个 uni-app 项目dragUI 可视化拖拽编程上手指南【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUIdragUI 是一个构建在 uni-app 之上的可视化拖拽编程工具在浏览器里把组件拖到画布上搭页面效果实时刷新最后还能把整个项目连同代码一起导出。它解决的是改一行代码 → 保存 → 等编译 → 才能看效果的反复循环适合想快速搭原型、做低保真页面的开发者也适合刚开始学 uni-app 的新手。dragUI 界面长什么样打开后是一个三区布局各司其职左侧组件库分成布局组件、普通组件按钮、输入框、文本、图片、进度条等、ColorUI 组件导航栏、卡片、步骤条、时间线等和表单组件四组按默认/自定义分类浏览中间画布组件落点即渲染不用保存、不用刷新右侧工程面板能直接看到生成项目的目录结构pages、components、manifest.json、pages.json 等选中任意组件后可以编辑 props、属性和自定义样式。顶部提供编辑模式下拉框以及布局锁定预览两个开关。README 里还配了一张带标注的图标出了各区域的边界拖拽组件三步上手从本地运行到导出代码第一步在浏览器里跑起来dragUI 本身就是一个普通 uni-app 项目克隆仓库后装好依赖按 uni 官方流程运行到浏览器即可git clone https://gitcode.com/gh_mirrors/dr/dragUI cd dragUI npm install第二步建项目先拖布局在右侧面板点创建项目。开始排版前只有一条规则先拖布局组件上画布普通组件只能放进布局的格子里。布局组件像网格一样把画布分成若干槽位把按钮拖进其中一格中间画布立刻出现一枚蓝色按钮。第三步改属性、开预览、导出工程选中按钮右侧面板切到编辑态把文案改成 hello world在属性里调颜色、尺寸每次修改即时生效。顺手把右上角预览开关打开就能看到最终的展示效果。项目数据基本实时保存在浏览器本地关掉页面也不会丢。搭好后点右侧导出项目会得到一个完整 uni-app 工程的压缩文件解出来就是可以直接运行的代码工程。️ dragUI 值得用的四个能力实时预览改动即时反映在浏览器里省掉保存和编译的等待迭代节奏完全不一样自动生成代码所见即所得导出的交付物是标准 uni-app 工程而不是绑定专有运行时的私有格式一键导出工程基于 jszip file-saver 把整个项目打包成压缩文件方便协作、备份和版本管理支持导入第三方组件内置 ColorUI 组件集和常用表单组件源码的 components/ 目录也方便你按现有套路扩充自己的组件。这类可视化拖拽工具适合谁用学 uni-app / 小程序的新手先用拖拽把页面搭出来建立结构直觉再对照导出的代码看组件是怎么对应的需要快速出原型的开发者做需求演示、低保真页面时省掉先写代码再看效果的弯路有现成组件想接入的人组件库是数据驱动的照着已有组件的模式可以把第三方组件挂进左侧面板。作者自己也坦言项目还不算成熟稳定upx 单位在桌面端换算这类细节仍有局限。觉得有用的话去把玩一下、提个 issue 或者点个 star都是帮它变好的方式。【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
