企业官网建设流程全解析

dragUI 可视化拖拽编程指南：3 步搭好 uni-app 页面，代码自动生成

【免费下载链接】dragUI基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI

dragUI 基于 uni 做可视化拖拽编程：把写页面变成在浏览器里拖组件。你拖一个按钮、改一个颜色，手机预览立刻刷新，做完还能把整个 uni-app 工程代码生成出来。

一句话看懂它

它把 UI 元素变成可拖拽对象：左侧选组件，中间拖进手机框，右侧改属性，浏览器实时更新。过去改一行样式要等保存、编译、刷新，现在拖一下就能看到。

核心能力拆解

三步上手

1. 拉代码：执行 git clone https://gitcode.com/gh_mirrors/dr/dragUI
2. 装依赖：进入目录执行 npm install
3. 运行：按 uni 官方流程跑起来，浏览器里即可开始拖

核心模块：拖拽主区域 components/PhoneFrame/，导出逻辑 common/js/outExportFile.js，渲染模板 templates/。

适合谁

• 前端新手：不写 CSS 也能搭出能跑的界面，先拖通流程再补逻辑
• uni-app 开发者：拖原型验证布局，确认后再生成代码进正式开发
• 教学场景：学生边拖边认组件，还能看到界面背后的代码结构

上手前要知道的事

上手难吗？不难。会拖文件就会用，组件以按钮、文本、输入框等基础件为主。

生成的代码能用吗？标准 uni-app 结构，可导入 HBuilderX 继续开发，生产环境建议自查。

支持哪些平台？编辑在浏览器完成，生成项目走 uni 渠道，H5 与小程序都能跑。

社区活跃吗？个人开源项目，更新偏慢，遇到问题建议直接看源码或提 issue 参与。

把"写完再看"变成"边拖边看"，dragUI 省下的是最实在的等待时间。去点个星，下次写页面前先拖一遍。

【免费下载链接】dragUI基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI