luban h5

Chinese Documentation|| English Docs| README(en)|| Forum/Community

Luban H5

Visual construction, drag and drop to generate mobile pages

Mobile Page Builder&Generator with Drag&Drop

Table of contents

• What is Luban H5?
• Demo
• Features
• Start now
• More instructions
  • Front-end component description
  • Technology stack (current)
• ??‍??‍ Communication Group

What is Luban H5?

1. Luban H5 is a platform developed based on Vue2.0 and quickly generates pages through drag and drop.
2. Platforms such as Yiqixiu, Maka, Baidu H5, etc.

Demo

Online access address

?Links/Related Links

Source code	document	Tutorial	Community
GitHub	Chinese Documentation	Video - Quick Start (Bilibili)	Forum/Community (Official Recommendation)
Gitee (domestic mirror)	English Docs	Custom Component Tutorial (WIP)	Gitter
	README(En)	Core implementation principle	Chinese community/forum (Tencent complains)

?Ecology

Backend integration	Official component library	Support/auxiliary components	Custom Components	RoadMap
Strapi.js (official backend API)	Carousel	Image gallery	Custom component development scaffolding	RoadMap/Development Plan
SpringBoot2-JPA	Normal button	Text Alignment	Custom component development tutorial
SpringBoot2-Mybatis-plus			Video Tutorial (WIP)

Quick experience

Choose any of the following methods

1. One-click script (recommended!)

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 

2. Node and Yarn are installed locally

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 即可

• For more details, please refer to the快速开始chapter of Luban H5-online document and configure it.

• If you encounter an interface 403 problem, please refer to快速开始chapter and search for keywords: 403

Communication group

DingTalk Group	WeChat official account	WeChat
		Please note: Luban H5 communication

For more details, please read the online documentation

Features

1. Editor

   • Reference lines
   • Adsorption lines, component alignment
   • Drag and drop to change the shape of the component
   • Element: Copy (canvas)
   • Element: Delete (canvas)
   • Element: Edit (canvas)
   • Page: Added
   • Page: Copy
   • Page: Delete
   • Quick preview
   • Undo, redo

2. Component system

   • Word
   • Normal button
   • Form Button
   • Form input box
   • Normal pictures
   • Background image
   • Background music
   • Video (Iframe form)

3. Enhanced features

   • Upload PSD and convert it to H5 with one click (it has been investigated and can be realized)
   • Image gallery
   • Third-party copyright-free image search
   • Custom scripts (has been investigated and can be implemented)

4. Backend API

   • Create, save, update works
   • Form data collection
   • Form data display
   • Online preview
   • QR code preview

Technology stack (current)

1. Front-end: Vue.js
2. Backend: Strapi
3. Storage: Sqlite

How to contribute

All reasonable changes, optimizations, corrections, new components, or document corrections and updates related submissions will be accepted.

Donate to the author

If you think this project is useful or inspiring to you, you can ask the author to have a drink of juice:

Donate on WeChat	Donate to Alipay