前言

最近,有好友找我做H5宣传页(没错,就是你在朋友圈经常看到的那种“招聘、开业、活动”等宣传网页),尴尬的是我平时并没有收集或拆腾过类似的H5宣传页面。只知道大部分都是用几大平台制做的(易企秀、兔展等),不过其中一部分精美查模版是要收费的。去易企秀了解了下,果然这种宣传页面的关键在于UI图片。因为页面展示内容都是类似的(老实说这些模版用的背景音乐算侵权吗?搞不懂)。故事到此为止了吗?不不不,这才刚刚开始。

又在github上一波搜索,发现了百度也推出了个百度H5平台,免费使用。不过免费的缺点就是模版没那么全面,不过自已制作的话肯定要准备好素材,自己创造模版并做出精美的的H5页面。回到github上,我发现了一堆制作H5页面的代码库。

第一个就是我现在要介绍的的H5了,打开仓库发现其readme如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
H5
简介
H5是一款可视化编辑手机H5页面的单页应用WebApp,可以根据用户的设计自动产生精美的H5界面。

类似市面上易企秀、简客这样的app。

这是我的个人项目,旨在学习Vue.js以及前后端开发流程。

......

技术
前端:Vue.js + Vuex

后端:Node.js

构建:webpack

数据库: MongoDB

UI: Muse-UI (https://museui.github.io/#/index)

当然还有一些其他仓库,准备下篇文章再讲(也有使用react的)。可以看到这是一个H5页面生成的平台,使用了vue,而且看介绍只是个个人练手项目,大佬无疑了。打开大佬主页可以看到:

先不膜拜大佬了,开始拆腾,git上下载仓库代码下来,git clone 、 cnpm i 、npm start 一顿操作猛如虎,结果报错跑不起来。

当然了,再修改了一些代码后最终还是让我给跑起来了。不过建议不用拆腾了,毕竟是练习的demo,很多功能不完善,大佬也不准备维护了。clone下来学习一波是可以的。下篇文章也将介绍更加好用的H5页面生成器。
演示:

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦