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

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

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

技术实现vue + vuex + vue-routerelement-ui 饿了么PC组件库mint-ui 饿了么移动端组件库cropperjs 一款强大的图片裁剪工具monaco-editor 微软开源的基于Vscode代码编辑器js-cookie 轻量级JS Cookie插件axios 基于promise的HTTP库安装使用

# 下载项目git clone  进入目录cd gods-pen# 安装依赖包yarn install# 开发npm start# 编辑器构建npm run editor:build# 渲染器构建npm run client:build

组件简单接入

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

组件动画展示

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

合成组件展示

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

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

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

# 官网地址 在线体验 组件商城 仓库地址

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