ByteNoteByteNote
字

字节笔记本

2026年3月22日

鲁班 H5：开源可视化移动端页面搭建平台

#前端技术

鲁班 H5（Luban H5）是一款开源的可视化移动端页面搭建平台，通过拖拽方式快速生成 H5 页面，类似易企秀、Maka 等商业产品。它基于 Vue 2.0 开发，提供了完整的编辑器功能和后端 API 支持。

项目简介

鲁班 H5 是一个开源的移动端页面制作/建站工具，实现了类似易企秀的 H5 制作和可视化搭建功能。项目支持拖拽编辑、组件系统、图片库等功能，后端使用 Strapi.js 提供 API，前端使用 Vue.js 构建，存储使用 SQLite。

核心功能

编辑器

  • 参考线和吸附线，组件自动对齐
  • 拖拽改变组件形状和位置
  • 元素复制、删除、编辑
  • 页面新增、复制、删除
  • 快速预览
  • 撤销和重做操作

组件系统

  • 文字组件
  • 普通按钮和表单按钮
  • 表单输入框
  • 普通图片和背景图
  • 背景音乐
  • 视频播放（iframe 形式）
  • 轮播图组件

增强功能

  • 上传 PSD 一键转换为 H5 页面
  • 图片库管理
  • 第三方无版权图片搜索
  • 自定义脚本支持

后端 API

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

技术栈

层级技术
前端框架Vue.js 2.0
后端框架Strapi.js
数据库SQLite
官方后端SpringBoot2-JPA / SpringBoot2-Mybatis-plus

快速开始

一键脚本部署（推荐）

bash
git clone https://github.com/ly525/luban-h5 && cd luban-h5

# 安装依赖，构建前后端
./luban-h5.sh init

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

手动安装

bash
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

生态系统

类别项目
官方后端 APIStrapi.js / SpringBoot2-JPA / SpringBoot2-Mybatis-plus
官方组件库轮播图、普通按钮等
辅助组件图片库、文本对齐
自定义组件开发脚手架和教程

适用场景

  • 营销活动 H5 页面快速制作
  • 企业宣传页面搭建
  • 移动端表单收集
  • 可视化建站系统二次开发
  • 前端可视化编辑器技术学习

相关链接

前端技术
上一篇

DeepLX：免费 DeepL API 无限制翻译接口

下一篇

鲁班 H5：开源可视化移动端页面搭建平台

分享: