haxine / luban-h5

[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.

📖中文在线文档 | 📖English Docs | README(en)

鲁班 H5

基于Vue开发，通过拖拽的形式，生成移动页面

Mobile Page Builder&Generator with Drag&Drop

快速体验

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

一、一键脚本

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

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

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

二、本地安装了 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

• 按照提示，在浏览器中访问终端中提示的 URL 即可
• 更多细节，请参照 鲁班H5-在线文档 的 快速开始 章节，进行配置即可

二、熟悉 Docker

使用官方提供的 一键安装脚本，简化安装步骤，在本地通过使用 Docker+Ubuntu 镜像，即可快速安装+体验 鲁班H5

快速体验-完整文档，简而言之：

docker pull ubuntu
docker run -it -p 1234:80 -p 1235:1337  -v `pwd`:/app ubuntu
# 使用清华大学 Ubuntu 软件镜像
sed -i 's/archive.ubuntu.com/mirrors.tuna.tsinghua.edu.cn/g' /etc/apt/sources.list
apt update && apt install -y wget git
wget -qO- https://raw.githubusercontent.com/ly525/luban-h5/dev/deploy/ubuntu-install.sh | bash

# 安装完成之后
# 1. visit ：http://localhost:1234/admin，自定义配置账号密码，登录即可
# 1.2 配置相关权限，文档参见：https://ly525.github.io/luban-h5/zh/getting-started/quick-start.html#%E5%90%8E%E7%AB%AF%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA

# 2. 鲁班前端
# 2.1 宿主机访问 「鲁班前端」：localhost:1234, 即可看到鲁班的前端

🔗Links/相关链接

源码	文档	教程	社区
GitHub	中文文档	视频-快速开始(哔哩哔哩)	中文社区/论坛
Gitee (国内镜像)	English Docs	自定义组件教程(WIP)	Gitter
	README(En)	核心实现原理

🔗生态

后端集成	官方组件库	支撑/辅助组件	自定义组件	RoadMap
Strapi.js (官方后端API)	轮播图	图片库	自定义组件开发脚手架	RoadMap/开发计划
SpringBoot2-JPA	普通按钮	文本对齐	自定义组件开发教程
SpringBoot2-Mybatis-plus			视频教程(WIP)

目录

• 鲁班H5是什么？
• Demo
• Features
• 快速开始
• 更多说明
  • 前端组件说明
  • 技术栈（当前）
• 👨🏻‍💻👩🏻‍💻交流群

鲁班H5是什么？

鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似易企秀、百度 H5 等工具

Demo

在线访问地址

快速开始

请参照 鲁班H5-在线文档 的 快速开始 章节

交流群

钉钉群	微信公众号	微信
		请备注：鲁班H5交流

更多细节请阅读在线文档

Features

1. 编辑器

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

2. 组件系统

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

3. 增强功能

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

4. 后端 API

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

更多说明

前端组件说明

1. lbp- 全称为 lu-ban-plugin-, 意思为 鲁班H5的插件，位置：front-end/h5/src/components/plugins

技术栈（当前）

1. 前端：Vue.js
2. 后端：Strapi
3. 存储：Sqlite

如何贡献

所有合理的改动、优化、修正，新的组件，或者文档的修正、更新 相关的提交都会被接受