README.en.md



📖 Document | 📖简体中文


What's LuBan-H5?


LuBan-H5 is a mobile page builder based on Vue.js, which is similar with Amolink eqx(it's a chinese website, you may need to translate the page). It also supports parsing PSD file to HMTL5 Page


Demo


Preview Website


let's go through it real quick.


in short


git clone https://github.com/ly525/luban-h5 && cd luban-h5
# install dependencies &&  build front-end && build back-end
./luban-h5.sh init

./luban-h5.sh start

# ./luban-h5.sh stop

# after the installation finished
# 1. visit ：http://localhost:1337/admin, create your admin account
# 1.2 config the api permissions, see more here：https://ly525.github.io/luban-h5/en/getting-started/quick-start.html#_2-something-important

# 2. front-end
# 2.1 visit https://localhost:1337 to get the front-end of luban-h5


Links


Documents


Chinese online document
English


Source Code


GitHub: https://GitHub.com/ly525/luban-h5

Gitee(China Mirror)


Community


Gitter
吐个槽：For Chinese Users


Ecosystem


back-end integration


Strapi.js(official Node.js backend API for luban-h5)
Spring Boot API Demo


Custom components


Rapid development of custom component scaffolding


 official components library


Slide
Normal Button(different from form-button)


Support Component/Auxiliary Component


Image Gallery: For Quick Selection of images from the gallery
Text alignment-Repo(for Button text alignment)


Features


Editor


 Reference Line/GuideLine

 Adsorption Line

 Change plugin shape by drag-and-drop

 Edit Element (Canvas)

 Copy Element (Canvas)

 Delete Element (Canvas)

 Edit Page

 Copy Page

 Delete Page

 Quick Preview

 Undo、Redo


Plugin System


- [x] Text
- [x] Normal Button
- [x] Form Button
- [x] Form Field
- [x] Picture
- [x] Background Image
- [x] Background Music
- [x] Video (Iframe format)


enhanced function


 parsing PSD file to HTML Page

 Photo Gallery

 Third Party uncopyrighted Image Search


back-end API


 create work

 save work

 update work

 Form Statistics

 Online Preview

 QR Code Preview


Installs


proj: project root path
please refer to: Document/Quick Start


More Explanation


Front-End Component Explanation


lbp-: lu-ban-plugin-, means Luban H5 plugin, location: proj/front-end/h5/src/components/plugins


Build With (current)


Front end: Vue.js
Back End: Strapi
Storage: Sqlite


Read more here Online English Document