鲁班 H5，一款前后端均开源的 H5 快速制作工具

简体中文 | English

目录

鲁班H5是什么？

鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似 易企秀 、 百度 H5 等工具

Screenshots

在线访问地址

更多作品演示图片，点击查看

Features

1. 编辑器

2. 组件系统

3. 增强功能

4. 后端 API

安装

说明：project：项目根目录

1. 前端

   1. 编辑器部分请参照 project/front-end/h5/README.md

2. 后端

   1. 后端 API 部分请参照 project/back-end/h5-api/README.md

更多说明

前端组件说明

1. lbp- 全称为 lu-ban-plugin- , 意思为 鲁班H5的插件 ，位置： front-end/h5/src/components/plugins

技术栈（当前）

1. 前端： Vue.js
2. 后端： Strapi
3. 存储： Sqlite

交流群

因为微信群二维码会过期，所以 微信群和QQ群 的二维码请前往查看 鲁班-H5 微信群和QQ群 查看

钉钉讨论组（推荐, 对代码排版相对友好）

#!en: Scan the DingTalk QR code using Dingtalk App

For users in other languages, please keep using Github issue tracker.   

代码目录说明

前端部分

推荐先看 router.js, 再从 front-end/h5/src/views/Editor.vue 开始了解，这里是编辑器的入口

front-end/h5/src                # 前端源码目录：包含编辑器、作品管理、表单统计等部分
├── assets
│   ├── 403.svg
│   ├── 404.svg
│   ├── 500.svg
│   ├── logo.png
│   ├── placeholder-for-work.svg
│   └── unauth-page-illustration.svg
├── components
│   ├── core                    # 核心部分
│   │   ├── editor              # 编辑器模块
│   │   │   ├── canvas          # 画布：编辑模式 + 快速预览模式
│   │   │   │   ├── edit.js     # 编辑模式对应画布
│   │   │   │   └── preview.js  # 快速预览模式对应的画布
│   │   │   ├── edit-panel      # 编辑器右侧的编辑、配置面板
│   │   │   │   ├── action.js   #
│   │   │   │   ├── props.js    # 组件属性编辑面板
│   │   │   │   └── script.js   # 自定义脚本
│   │   │   ├── header
│   │   │   ├── modals
│   │   │   │   └── preview.vue # 预览弹窗
│   │   │   ├── shortcuts-panel # 插件列表对应的快捷按钮
│   │   │   │   ├── index.js
│   │   │   │   └── shortcut-button.js
│   │   │   └── index.js
│   │   ├── models              # 编辑器中的各种 model
│   │   │   ├── element.js      # 插件在画布中对应的元素
│   │   │   ├── page.js         # 页面
│   │   │   └── work.js         # 整个H5作品
│   │   ├── styles
│   │   │   └── index.scss
│   │   └── support             # 辅助支持部分
│   │       └── shape.js        # 拖拽改变元素形状
│   ├── plugins                 # 插件列表：按钮、表单(提交按钮+输入框)、文字、图片
│   │   ├── lbp-button.js
│   │   ├── lbp-form-button.js
│   │   ├── lbp-form-input.js
│   │   ├── lbp-picture-placeholder.jpg
│   │   ├── lbp-picture.js
│   │   └── lbp-text.js
│   └── HelloWorld.vue
├── constants                  # 常量配置
│   └── api.js                 # 后端 API 接口地址等配置
├── mixins                     # 加载插件
│   └── load-plugins.js
├── pages
│   ├── editor                 # 核心编辑器入口
│   ├── home
│   └── index
├── store
│   ├── modules
│   │   ├── editor.js
│   │   ├── element.js
│   │   ├── loading.js
│   │   ├── page.js
│   │   ├── user.js
│   │   ├── visible.js
│   │   └── work.js
│   ├── plugins               # vuex 插件
│   │   └── undo-redo         # 撤销、重做
│   │       ├── History.js
│   │       └── index.js
│   └── index.js
├── utils
│   ├── element.js
│   ├── http.js
│   └── strapi.js
├── views
│   ├── work-manager
│   │   ├── form-stat
│   │   │   ├── column.js
│   │   │   ├── detail.vue
│   │   │   └── index.vue
│   │   ├── index.vue
│   │   └── list.vue
│   ├── About.vue
│   ├── Editor.vue           # 编辑器入口，对核心编辑器做了一层包装，在这里加载插件列表
│   └── Home.vue
├── App.vue
├── engine-entry.js          # 用于在手机端预览、查看H5作品的入口
├── main.js                  # 编辑器 + work-manager(作品管理页面) 的入口
├── registerServiceWorker.js
└── router.js                # 页面路由