开源精品 Vue 可视化在线H5搭建平台Gods-Pen

前几天有分享一个vue大数据可视化模板。今天给大家介绍一款超优良的Vue可视化拖拽制作平台项目GodsPen。

开源精品 Vue 可视化在线H5搭建平台Gods-Pen

基于Vue大数据可视化大屏模板

gods-pen 基于 vue2.x 构建的拖拽式H5在线网页制作平台,star高达3.1K 。支持自定义组件、添加脚本、数据统计及在线生成可管理和编辑的h5页面

开源精品 Vue 可视化在线H5搭建平台Gods-Pen

技术实现

  • vue vuex vue-router
  • element-ui 饿了么PC组件库
  • mint-ui 饿了么移动端组件库
  • cropperjs 一款强大的图片裁剪工具
  • monaco-editor 微软开源的基于Vscode代码编辑器
  • js-cookie 轻量级JS Cookie插件
  • axios 基于promise的HTTP库
开源精品 Vue 可视化在线H5搭建平台Gods-Pen

安装使用

# 下载项目
git clone https://github.com/ymm-tech/gods-pen.git

# 进入目录
cd gods-pen

# 安装依赖包
yarn install

# 开发
npm start

# 编辑器构建
npm run editor:build

# 渲染器构建
npm run client:build
开源精品 Vue 可视化在线H5搭建平台Gods-Pen
开源精品 Vue 可视化在线H5搭建平台Gods-Pen

组件简单接入

如果第三方组件满足不了你,可以使用官方提供的脚手架创建组件,暴露参数给其他同学在编辑器填写即可。

开源精品 Vue 可视化在线H5搭建平台Gods-Pen
开源精品 Vue 可视化在线H5搭建平台Gods-Pen
https://godspen.ymm56.com/doc/develop/component.html

组件动画展示

使用了 Animate.css 提供的一套 CSS 动画。并提供逐帧设置预览,方便使用。

开源精品 Vue 可视化在线H5搭建平台Gods-Pen

合成组件展示

合成组件就是选择已有的节点保存为一个通用的组件,方便下次直接使用。

开源精品 Vue 可视化在线H5搭建平台Gods-Pen

官网提供了丰富的文档及操作说明。

开源精品 Vue 可视化在线H5搭建平台Gods-Pen
开源精品 Vue 可视化在线H5搭建平台Gods-Pen
开源精品 Vue 可视化在线H5搭建平台Gods-Pen

截止2020年7月 已经支撑起满满4100多个活动页面,官方还在持续更新迭代,目前官网上所有的体验能力均免费开源,想要技术提升的同学不可错过哟!

# 官网地址
https://godspen.ymm56.com/

# 在线体验
https://godspen.ymm56.com/admin/#/home

# 组件商城
https://godspen.ymm56.com/shop/

# 仓库地址
https://github.com/ymm-tech/gods-pen

ok,就介绍到这里。希望这次分享能帮助到大家,感兴趣的同学可以去看下哈!

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/10616.html

发表评论

登录后才能评论