Vue2.x全家桶技术写的一个详细的后台管理架构和数据可视化大屏(附git地址)

Vue后台管理架构

背景介绍

由于前一段比较忙,没有怎么总结知识点,但是闲着没事自己又写的一个比较详细的后台管理架构,项目运用了Vue2所有全家桶技术,包括Vue-Router,Vuex,mock.js,axios,Echart.js,antv-g6,tinymce,swipe等技;其中包括两个数据可视化大屏展示,用到各种各样的图表展示;

下面我会把产品图放到下面,如果你想需要,最后会附上gitHub地址,可直接拉取,在您本地启动;

产品图展示

后台管理架构

登录页

在这里插入图片描述
主页

在这里插入图片描述
在这里插入图片描述
左侧菜单可以展开和缩进;以及写了简单的Vuex示例;

在这里插入图片描述

在这里插入图片描述
插槽

在这里插入图片描述
antv-g6

在这里插入图片描述
自定义指定

在这里插入图片描述
在这里插入图片描述

数据可视化大屏

主屏就一个屏幕,最后两个图更多可以点开显示的表格;

在这里插入图片描述

子数据大屏设计的是可以左右上下滑动的;

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

gitHub地址

以上都是一些基础技术知识点,也木有什么好介绍的,大家一看就会,分享出来是为了记录和需要的朋友,希望可以帮助到你;

gitHub地址:https://github.com/lcSuperman/my-project-vue2.git

账号:admin ; 密码:12345

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_44182284/article/details/128912952