鲁班H5快速入门指南：从零开始搭建可视化H5编辑器-优快云博客

鲁班H5快速入门指南：从零开始搭建可视化H5编辑器

luban-h5 [WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统. 项目地址: https://gitcode.com/gh_mirrors/lu/luban-h5

项目概述

鲁班H5是一款基于Vue.js和Strapi的开源可视化H5页面制作工具，它允许用户通过拖拽方式快速构建移动端H5页面，无需编写代码即可完成专业级的页面设计。本文将详细介绍如何从零开始搭建鲁班H5开发环境。

环境准备

基础软件要求

在开始之前，请确保您的系统满足以下基本要求：

Node.js：推荐使用LTS版本（v10或v12）
Yarn：Node.js包管理工具（比npm更快更稳定）
Git：版本控制工具

环境配置建议

对于国内开发者，建议配置镜像源以加速依赖获取：

# 配置Yarn淘宝镜像源
yarn config set registry https://registry.npmmirror.com

# 验证配置是否生效
yarn config get registry

三种获取方式

根据您的技术背景和使用场景，可以选择以下任一方式获取鲁班H5：

1. 一键脚本获取（推荐新手）

这是最简单的获取方式，适合想要快速体验的用户：

# 克隆项目代码
git clone https://github.com/ly525/luban-h5 && cd luban-h5

# 初始化项目（自动获取依赖）
./luban-h5.sh init

# 启动项目
./luban-h5.sh start

启动成功后，访问 http://localhost:1337 即可使用。

2. 手动获取（适合前端开发者）

如果您熟悉前端开发流程，可以按照以下步骤手动获取：

# 克隆项目
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

3. Docker获取（适合容器化部署）

虽然仍在完善中，但Docker方式可以提供隔离的环境：

docker pull ubuntu
docker run -it -p 1234:80 -p 1235:1337 -v `pwd`:/app ubuntu

# 在容器内执行获取脚本
wget -qO- https://raw.githubusercontent.com/ly525/luban-h5/dev/deploy/ubuntu-install.sh | bash