ly525/luban-h5

📖 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
# If you encounter installation errors with sqlite3, node-gyp, etc., please run ./deploy/mirror.sh to configure npm registry to Alibaba Cloud Mirror
./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

1. 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

2. Plugin System

   • Text
   • Normal Button
   • Form Button
   • Form Field
   • Picture
   • Background Image
   • Background Music
   • Video (Iframe format)

3. enhanced function

   • parsing PSD file to HTML Page
   • Photo Gallery
   • Third Party uncopyrighted Image Search

4. 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

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

Build With (current)

1. Front end: Vue.js
2. Back End: Strapi
3. Storage: Sqlite

Read more here Online English Document