鲁班H5-可视化搭建，拖拽生成移动端页面

官网项目地址

https://github.com/ly525/luban-h5

鲁班H5是什么？

1. 鲁班H5是基于Vue2.0开发、通过拖拽快速生成页面的平台
2. 类似 易企秀、Maka、百度 H5 等平台

Demo

https://h5.luban-h5.com/

快速体验

以下方式，任选其中一种即可

一、一键脚本（推荐！）

git clone https://github.com/ly525/luban-h5 && cd luban-h5
# 安装依赖，构建前后端（安装依赖会耗时略长，请耐心等待）
./luban-h5.sh init

# 启动项目访问 http://localhost:1337 即可
./luban-h5.sh start

# ./luban-h5.sh stop

二、本地安装了 Node、Yarn

git clone https://github.com/ly525/luban-h5
cd luban-h5 # 项目根目录

# 后端
cd back-end/h5-api && yarn && yarn dev

# 前端
# 新开一个终端，在项目根目录执行如下命令
cd front-end/h5 && yarn && yarn build:engine && yarn dev

# 启动项目访问 http://localhost:1337 即可

• 更多细节，请参照 鲁班H5-在线文档 的 快速开始 章节，进行配置即可

• 如果遇到接口 403 问题，请参照 快速开始 章节，搜索关键字：403 即可

更多细节请阅读在线文档

Features

1. 编辑器

   •  参考线
   •  吸附线、组件对齐
   •  拖拽改变组件形状
   •  元素: 复制（画布）
   •  元素: 删除（画布）
   •  元素: 编辑（画布）
   •  页面：新增
   •  页面：复制
   •  页面：删除
   •  快速预览
   •  撤销、重做

2. 组件系统

   •  文字
   •  普通按钮
   •  表单按钮
   •  表单输入框
   •  普通图片
   •  背景图
   •  背景音乐
   •  视频（Iframe形式）

3. 增强功能

   •  上传 PSD，一键转换为 H5(已经调研，可以实现)
   •  图片库
   •  第三方无版权图片搜索
   •  自定义脚本(已经调研，可以实现)

4. 后端 API

   •  创建、保存、更新作品
   •  表单数据收集
   •  表单数据展示
   •  在线预览
   •  二维码预览