鲁班H5页面生成工具源码现在

[论坛/社区](https://github.com/ly525/luban-h5/discussions) || [中文文档-推荐(语雀)](https://www.yuque.com/luban-h5/docs) || [📖中文在线文档(github.io)](https://ly525.github.io/luban-h5/zh/) | [📖English Docs](https://ly525.github.io/luban-h5/en/getting-started/introduction.html) | [README(en)](./README.en.md) || [Community/Discussions](https://github.com/ly525/luban-h5/discussions) <h2 align="center"> 鲁班 H5 </h2> <p align="center"> 可视化搭建，拖拽生成移动端页面 </p> <p align="center"> Mobile Page Builder&Generator with Drag&Drop </p> [](http://makeapullrequest.com) [](https://ly525.github.io/luban-h5/) [](https://github.com/ly525/luban-h5/workflows/docs) [](https://gitter.im/luban-h5/community) [](https://github.com/ly525/luban-h5/issues) [](https://GitHub.com/ly525/luban-h5/stargazers/) [](https://gitee.com/ly525/luban-h5.git) 目录 - [鲁班H5是什么？](#%E9%B2%81%E7%8F%ADh5%E6%98%AF%E4%BB%80%E4%B9%88) - [Demo](#Demo) - [Features](#features) - [快速开始](#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B) - [更多说明](#%E6%9B%B4%E5%A4%9A%E8%AF%B4%E6%98%8E) * [前端组件说明](#%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6%E8%AF%B4%E6%98%8E) * [技术栈（当前）](#%E6%8A%80%E6%9C%AF%E6%A0%88%E5%BD%93%E5%89%8D) - [👨🏻‍💻👩🏻‍💻交流群](#%E4%BA%A4%E6%B5%81%E7%BE%A4) ### 鲁班H5是什么？ 1. 鲁班H5是基于Vue2.0开发、通过拖拽快速生成页面的平台 2. 类似 [易企秀](http://www.eqxiu.com/)、[Maka](http://maka.im/)、[百度 H5](https://h5.baidu.com) 等平台 ### Demo > [在线访问地址](https://h5.luban-h5.com) <img src="https://s2.ax1x.com/2019/10/11/u7WzUx.gif" style="margin: 10px;" width="60%" /> ### 🔗Links/相关链接 | 源码 | 文档 | 教程 | 社区 | | ------ | -------- | ------ | ------ | | [GitHub](https://github.com/ly525/luban-h5) | [中文文档](https://ly525.github.io/luban-h5/zh/) | [视频-快速开始(哔哩哔哩)](https://space.bilibili.com/121039466/channel/detail?cid=94066) | [论坛/社区(官方推荐)](https://github.com/ly525/luban-h5/discussions) | [Gitee (国内镜像)](https://gitee.com/ly525/luban-h5) | [English Docs](https://ly525.github.io/luban-h5/en/getting-started/introduction.html) | 自定义组件教程(WIP) | [Gitter](https://gitter.im/luban-h5/community) | | | [README(En)](./README.en.md) | [核心实现原理](https://juejin.im/post/5d6df27a6fb9a06b2d77eef9) | [中文社区/论坛(腾讯吐个槽)](https://support.qq.com/product/93432) | ### 🔗生态 | 后端集成 | 官方组件库 | 支撑/辅助组件 | 自定义组件 | RoadMap | |------------------------------------------------------------------------------------------------|-----------------------------------------------------------|----------------------------------------------------|-------------------------------------------------------------------|------------------------------------------------------------| | [Strapi.js (官方后端API)](/luban-h5/tree/dev/back-end/h5-api) | [轮播图](https://github.com/luban-h5-components/lbp-slide) | 图片库 | [自定义组件开发脚手架](https://github.com/luban-h5/vue-cli-plugin-lbhc) | [RoadMap/开发计划](https://github.com/ly525/luban-h5/projects) | | [SpringBoot2-JPA](https://github.com/luban-h5/spring-boot-api-for-editor) | [普通按钮](https://github.com/luban-h5-components/lbc-button) | [文本对齐](https://github.com/luban-h5/lbs-text-align) | [自定义组件开发教程](https://github.com/luban-h5/vue-cli-plugin-lbhc/wiki) | | | [SpringBoot2-Mybatis-plus](https://github.com/luban-h5/springboot2-mybatis-plus-api-for-luban) | | | 视频教程(WIP) | | ## 快速体验 > 以下方式，任选其中一种即可 #### 一、一键脚本（推荐！） ```bash 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 ``` #### 二、本地安装了 Node、Yarn ```bash 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 即可 ``` - 更多细节，请参照 [鲁班H5-在线文档](https://ly525.github.io/luban-h5/zh/) 的 [`快速开始`](https://ly525.github.io/luban-h5/zh/getting-started/quick-start.html) 章节，进行配置即可 - 如果遇到接口 403 问题，请参照 [`快速开始`](https://ly525.github.io/luban-h5/zh/getting-started/quick-start.html) 章节，搜索关键字：403 即可 ### 交流群 | 钉钉群 | 微信公众号 | 微信 | |---|---|---| | <img src="https://user-images.githubusercontent.com/12668546/90198376-157d7380-de04-11ea-8fb6-b53d33050741.png" width="100" />| <img src="https://user-images.githubusercontent.com/12668546/65471913-ab827580-dea3-11e9-919c-870c9605c60f.png" width="100" /> | <img src="https://user-images.githubusercontent.com/12668546/66585418-5cce1e80-ebb9-11e9-91c0-56f658f09e27.png" width="100" /> <br />请备注：鲁班H5交流| ## 更多细节请阅读[在线文档](https://ly525.github.io/luban-h5) ### Features 1. 编辑器 - [x] 参考线 - [x] 吸附线、组件对齐 - [x] 拖拽改变组件形状 - [x] 元素: 复制（画布） - [x] 元素: 删除（画布） - [x] 元素: 编辑（画布） - [x] 页面：新增 - [x] 页面：复制 - [x] 页面：删除 - [x] 快速预览 - [x] 撤销、重做 2. 组件系统 - [x] 文字 - [x] 普通按钮 - [x] 表单按钮 - [x] 表单输入框 - [x] 普通图片 - [x] 背景图 - [x] 背景音乐 - [x] 视频（Iframe形式） 3. 增强功能 - [ ] 上�