Luban-H5 开源项目指南

Luban-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

1. 项目介绍

Luban-H5 是一款基于 Vue.js 的移动端页面构建工具，类似于Amolink或eqx（需翻译页面）。它具有将PSD文件解析成HTML5页面的功能，让开发者可以快速地创建和编辑移动网页。

2. 项目快速启动

熟悉Node环境

如果你已安装了Node和Yarn，可以通过以下命令快速启动：

1. 克隆项目到本地

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

2. 切换到后端目录并安装依赖

cd back-end/h5-api
yarn
yarn dev

3. 进入前端目录并完成引擎构建及开发服务器启动

cd ../front-end/h5
yarn
yarn build:engine
yarn dev

默认数据库为SQLite3（db位置：h5-api/tmp/data.db）。 访问http://localhost:1337/admin配置API权限。

Docker方式

如果你使用Docker，可执行以下操作：

1. 拉取Ubuntu镜像

docker pull ubuntu

2. 启动容器并安装必要软件

docker run -it -p 1234:80 -p 1235:1337 -v `pwd`:/app ubuntu
apt update && apt install -y wget git
wget -qO- https://raw.githubusercontent.com/ly525/luban-h5/dev/deploy/ubuntu-install.sh | bash

完成后，通过以下步骤完成设置：

1. 访问: http://localhost:1235/admin，添加管理员账号。

2. 配置API权限，参考：链接

3. 前端页面预览：访问 https://localhost:1235。

3. 应用案例和最佳实践

Luban-H5 可用于快速构建企业宣传页、活动页等，适合非技术背景的设计师或产品经理使用。最佳实践包括：

• 在创建页面时，善用组件库以提高效率。
• 对复杂交互设计，利用Luban-H5的编辑功能来实现动态效果。
• 定期同步项目至服务器，保证数据安全。

4. 典型生态项目

• Strapi: 作为后端内容管理框架，与Luban-H5结合可打造强大的CMS系统。
• Ant Design: 提供UI组件，为Luban-H5提供丰富的设计样式选择。

以上是Luban-H5的基本介绍及启动步骤，更多详细信息和进阶使用方法，可以查看官方文档。

---

本文档旨在帮助您快速上手Luban-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