基于 Vue 的拖拽式 H5 生成工具 鲁班 H5

GPL
JavaScript
跨平台
2019-09-02

鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀百度 H5 的一个可视化搭建系统

初心:希望能通过工程化的手段,大幅度提高简单H5页面的制作效率,提高工程师的幸福感,从这种需求频繁变更的简单任务中解脱出来

Screenshots

在线访问地址

Features

  1. 编辑器    

    1. - [x] 参考线    

    2. - [x] 吸附线、组件对齐    

    3. - [x] 拖拽改变组件形状    

    4. - [x] 元素: 复制(画布)    

    5. - [x] 元素: 删除(画布)     

    6. - [x] 元素: 编辑(画布)    

    7. - [x] 页面:新增    

    8. - [x] 页面:复制    

    9. - [x] 页面:删除    

    10. - [x] 快速预览    

    11. - [x] 撤销、重做

  2. 组件系统    

    1. - [x] 文字    

    2. - [x] 普通按钮    

    3. - [x] 表单按钮    

    4. - [x] 表单输入框    

    5. - [x] 普通图片    

    6. - [ ] 背景图    

    7. - [ ] 视频(Iframe形式)

  3. 增强功能    

    1. - [ ] 上传 PSD,一键转换为 H5(已经调研,可以实现)    

    2. - [ ] 图片库    

    3. - [ ] 第三方无版权图片搜索    

    4. - [ ] 自定义脚本(已经调研,可以实现)

  4. 后端 API    

    1. - [x] 创建、保存、更新作品    

    2. - [x] 表单数据收集    

    3. - [x] 表单数据展示    

    4. - [x] 在线预览    

    5. - [x] 二维码预览

技术栈(当前)

  1. 前端:Vue.js
  2. 后端:Strapi
  3. 存储:Sqlite
加载中

评论(12)

勇敢的心_
勇敢的心_
免费商用吗
守护幸福
守护幸福
支持不支持centos
s
sonlia
只是手机端?
s
studentduck
可以拿到组件的源码吗?
小小鲁班的技术口袋
小小鲁班的技术口袋 软件作者
对的
H
HappyMakeCode
主要是给企业内部使用吧,类似于活动平台营销推广,这类页面需要推陈出新的
小小鲁班的技术口袋
小小鲁班的技术口袋 软件作者
收到,感谢您的建议 1. 已经收到需要调整分辨率的需求了,比如可以制作大屏幕、PPT 等 2. 离线播放这个是个额外需求,也是可以满足的。大概相当于是最后打包成一个包,把里面所有的资源的都下载好,这样在没网的环境下也可以使用 欢迎交流(仓库readme 里面有联系方式:smile:)
M
Mrz村长
正需要,我提几点建议: 1、建议可以自定义分辨率,而不是像某秀一样,只适配手机,用处就小了。拿我们公司来说,我很有很多非标准分辨率的广告机,正需要这个东西。可以有一些常规分辨率,然后再加一个自定义。 2.制作完东西如果能实现离线播放就好了。就像用axure画个原型,发布之后可以离线播放。这样对广告机的用处就更大了。 3.有个竞品,叫点石H5可以参考一下。
小小鲁班的技术口袋
小小鲁班的技术口袋 软件作者
非常感谢您的指点
小小鲁班的技术口袋
小小鲁班的技术口袋 软件作者
嗯嗯,您说的非常对。鲁班的定位并非直接To C端的用户,而是企业内部部署,通过一些增强手段来提升企业内部制作H5和营销的能力

鲁班H5 1.10.3 发布,支持 Echarts 柱状图、折线图、饼图

鲁班H5 前后端均开源的H5制作平台,可以理解为开源版本的简单易企秀、人人秀 本次更新支持了 Echarts 柱状图、折线图、饼图、漏斗图、雷达图等 Features component: !#zh: 支持echarts 图表组...

鲁班 H5 1.10.2 发布,新增地图组件

:tada::tada: :smile: 鲁班H5 V1.10.2 发布 Bug Fixes radio、checkbox显示不正确 (3b6b4d3) preview: #196; !#zh: 预览模块支持长页面 (10fc6e3) #185 #145 !#zh: 修正预览页文字模块双击后...

鲁班H5 1.10.1发布,新增评分组件;可以理解为开源版本的简单易企秀、人人秀

【鲁班H5】前后端都开源的h5快速制作平台,类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5 鲁班H5 1.10.1 (2020-06-14) 发布啦 Bug Fixes #170 (dca845f) #171 (1c3d39f) ...

鲁班 H5 1.8.0 发布,提供极简的部署方式

【鲁班H5】前后端都开源的h5快速制作平台,类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5 :tada::tada: 鲁班H5 v1.8.0 发布了: 主要更新:大幅度简化部署流程,简化后的...

鲁班H5 1.7.4 发布,开源版本的简单易企秀、人人秀

【鲁班H5】前后端都开源的h5快速制作平台,类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5 1.7.4 (2020-01-04) 更新内容如下: 简而言之:我们支持背景音乐了:musical_no...

鲁班H5 1.7.3 发布,开源版本的简单易企秀、人人秀

【鲁班H5】前后端都开源的h5快速制作平台,类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5 1.7.3 (2019-12-21)更新的内容有: Bug Fixes hotfix: remove localhost:1337 ...

鲁班H5 1.7.2 发布,开源版本的简单易企秀

【鲁班H5】前后端都开源的h5快速制作平台,类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5 1.7.2 (2019-12-08) 更新的内容有 Bug Fixes replace router.place with window...

鲁班 H5 1.7.0 发布,可以理解为开源版本的简单易企秀、人人秀

【鲁班H5】前后端都开源的h5快速制作平台,类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5 1.7.0 更新的内容有 (2019-11-23) Bug Fixes #107 (0bf1d9e) 修正Checkbox Grou...

鲁班H5 1.6.1 发布,可以理解为开源版本的易企秀

【鲁班H5】前后端都开源的h5快速制作平台,类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5 1.6.1 更新的内容有 1.6.1 (2019-11-03) Bug 修复 修正 #92: 通过 npm install ...

鲁班H5 1.5.0 发布,可以理解为开源版本的易企秀

【鲁班H5】前后端都开源的h5快速制作平台,类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5 1.5.0 更新的内容有 Bug Fix 修复预览 跨页面通信问题 修复克隆作品时候,动画复...

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

Luban 鲁班 图片压缩 MD

Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina.com Luban 鲁班 图片压缩 目录 目录 介绍 turbo 版本 算法步...

2018/08/28 20:50
42
0
h5文件(.h5和.hdf5)

HDF5 (.h5, .hdf5) HDF 是 Hierarchical Data Format(分层数据格式)的缩写 HDF 版本 5不与 HDF 版本 4 及早期版本兼容。 HDF5 (.h5, .hdf5)—Wolfram 语言参考资料 https://reference.wolf...

2019/04/14 10:35
43
0
h5是啥

现在很多营销人一知半解的 ,言必称h5,这个用h5实现啥啥啥的, 今天被小弟问h5到底是啥? 我想了会是啥呢? 后面想了会,简单地讲h5是个技术合集,跟之前的xhtml相比, 新增了些新标签、新增...

2016/11/29 16:44
25
0
.Net 图片上传压缩基于(Luban)鲁班,可能是最接近微信朋友圈的图片压缩算法

Luban-net .net version of Luban(鲁班)—可能是最接近微信的图片压缩算法 Luban.cs //支持Web上传 Luban(HttpPostedFile hpf) //支持本地文件 Luban(string path) // 忽略压缩 public int I...

2018/10/26 13:02
72
0
native与H5优缺点及H5测试

一、native(原生)与H5优缺点介绍 native(原生)优点   1、运行速度快   2、可以应用到底层的API   3、便捷性与易用性   4、打开会比较节省流量 native(原生)缺点   1、不同操作系统...

2019/10/30 23:27
25
0
h5

一、表单 1、电子邮件 <input type="email"> 表单提交时,会验证数据是否符合email的规范(有@,并且@后面有内容) 2、搜索类型 <input type="search"> 提供了快速清除的功能 3、url类型 <i...

2019/09/13 01:37
21
0
支付宝H5和微信公众号H5支付

此篇笔记总结于2016年,此时微信还没有开放外部H5支付,只是可以通过公众号支付间接打通H5支付,即H5必须在微信内部打开. 官网 支付宝:https://b.alipay.com/signing/productDetail.htm?pr...

2016/08/30 13:36
1K
0
介绍一个h5快速制作平台鲁班H5

鲁班H5是一个前后端都开源的h5快速制作平台,是基于Vue2.0开发的类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5。 1.5.0 更新的内容 Bug Fix 修复预览 跨页面通信问题 修复...

01/01 14:39
3
0
H5测试

H5是什么? H5的全称是HTML5,其实就是:移动端WEB页面。 H5与原生 APP的区别: APP是使用原生系统内核的,相当于直接在系统上操作,是我们传统意义上的软件,更加稳定。 H5的APP先得调用系统...

2019/11/21 14:50
7
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部