简体中文 | English

目录

• 鲁班H5是什么？
• Screenshots
• Features
• 安装
• 更多说明
  • 前端组件说明
  • 技术栈（当前）
• 👨🏻‍💻👩🏻‍💻交流群
• 代码目录说明
  • 前端部分

鲁班H5是什么？

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

Screenshots

在线访问地址

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

Features

1. 编辑器

   • 参考线
   • 吸附线、组件对齐
   • 拖拽改变组件形状
   • 元素: 复制（画布）
   • 元素: 删除（画布）
   • 元素: 编辑（画布）
   • 页面：新增
   • 页面：复制
   • 页面：删除
   • 快速预览
   • 撤销、重做

2. 组件系统

   • 文字
   • 普通按钮
   • 表单按钮
   • 表单输入框
   • 普通图片
   • 背景图
   • 视频（Iframe形式）

3. 增强功能

   • 上传 PSD，一键转换为 H5(已经调研，可以实现)
   • 图片库
   • 第三方无版权图片搜索
   • 自定义脚本(已经调研，可以实现)

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讨论组 (QQ 群号：251936377)

#!en: Scan the DingTalk QR code using Dingtalk App or Scan the QQ QR code using QQ App to join in discussion group

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                # 页面路由