1 Star 0 Fork 3

Neil-鹏 / pl-drag-template

forked from 青椒盖饭 / pl-drag-template 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

pl-drag-template

前言

想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面,除了感叹其神奇之处有没有想过其实现方式呢?本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤,并开源前端代码。有需要的小伙伴可以按照该教程从零实现自己的H5编辑器。(实现起来并不复杂,该教程只是提供思路,并非最佳实践)

一个h5可视化编辑器种子, 高仿凡科建站模板。

author: pl (刚刚才开源,更多问题请加入QQ交流群吧: 675286117(满员) 加2群:939125115)感谢点击上方的Star!!!

点击查看pl-drag-template在线demo

大概图形: image

拖动左边组件到画板区域释放即可,或者点击左边区域的组件。

注意: 最好使用谷歌打开,点击保存按钮就是一串json数据,你可以吧这个数据拿到其他手机平台进行渲染啦。有问题就加群 里面代码注释齐全,谁都看懂的哦

在这个模板的基础上,你就可以实现类似凡科的模板(当然你还可以实现其他的类似模板)。如下图就是我们产品的模样

image

友情链接

- umy-ui流畅渲染表格万级数据

项目目录

  src {
     apiUrl: 请路径存放
     assets: 项目资产存在图片等
     components: 公用组件存放
     module: 模块位置  {
         画板模块的配置如下: {
            components: 当前模块的私有组件 {
              attributeConfig 右边属性配置组件
              ... 其他的都是画板页面的组件
            }
            pluginLibrary: 画板的插件/模块/组件非常重要
            routers 当前模块的路由表
            style 当前画板的样式
            utils 公用js存放库
            vuex: 当前模块的状态存储
            viewPage: 当前模块的页面
            index.js: 导出当前模块
         }
     }
     vuex: 整个项目的状态存储汇集地方
     themes: 整个项目的公用样式表集中地方
     utils: 整个项目的工具文件夹
  }

技术栈

前端:
vue: 模块化开发少不了angular,react,vue三选一,这里选择了vue。
vuex: 状态管理
less: css预编译器。
element-ui:不造轮子,有现成的优秀的vue组件库当然要用起来。没有的自己再封装一些就可以了。
loadsh:工具类

前端编辑器实现

编辑器的实现思路是:编辑器生成页面JSON数据,服务端负责存取JSON数据,渲染时从服务端取数据JSON交给前端模板处理。

启动运行

npm run dev

空文件

简介

一个h5可视化编辑器项目 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/shaipe/pl-drag-template.git
git@gitee.com:shaipe/pl-drag-template.git
shaipe
pl-drag-template
pl-drag-template
master

搜索帮助

14c37bed 8189591 565d56ea 8189591