vue轻量级后台管理系统基础模板

项目地址

vue轻量级后台管理系统基础模板

在线预览

更新

2019.3.8 更新

增加面包屑功能，用于展示当前页面的访问路径

增加权限控制功能，如果未登陆，所有页面都重定向到登陆页

2019.3.1 更新

增加动态菜单栏功能

icon使用的是iview组件的icon组件。

数据格式：

// 左侧菜单栏数据
menuItems: [{name: 'Home', // 要跳转的路由名称 不是路径size: 18, // icon大小 非必填type: 'md-home', // icon类型 非必填text: '主页' // 文本内容},{text: '二级菜单',type: 'ios-paper',children: [{type: 'ios-grid',name: 'T1',text: '表格'},{text: '三级菜单',type: 'ios-paper',children: [{type: 'ios-notifications-outline',name: 'Msg',text: '查看消息'},{type: 'md-lock',name: 'Password',text: '修改密码'},{type: 'md-person',name: 'UserInfo',text: '基本资料',}]}]}
]

功能

登录页

一周七天自动切换不同的壁纸（建议自己配置）

标签栏

点击标签切换页面
刷新当前标签页
关闭其他标签/关闭所有标签

侧边栏

伸展/收缩
页面宽度过小自动收缩
多级菜单（利用iView组件）

用户相关

消息通知
用户头像
基本资料

动态菜单栏

根据数据动态生成菜单

面包屑

展示当前页面的路径

权限控制

如果在未登陆的情况下访问指定页面将会重定向到登陆页

其它

利用axios拦截器实现了ajax请求前展示loading 请求结束关闭loading

注意

源码可见并且添加了必要的注释可以自行更改

Index组件一般情况下只需要传数据就行其他不用关注

市面上有大量的vue后台管理系统模板但是功能都太丰富了而且有很多组件用不上所以写了这么一个最基础的只有必要功能的模板
UI库使用的是iView 有大量的组件可用

子组件跳转到子组件

// xxx为你想跳转的子组件name
this.$parent.gotoPage('xxx')

路由传参

this.gotoPage('UserInfo', {id: id,
})
// 在UserInfo组件里取参
this.$route.params.id

使用

下载

git clone git@github.com:woai3c/vue-admin-template.gitcd vue-admin-templatenpm i

开发

npm run dev

打包

npm run build

如果对你有帮助，请给个Star

vue轻量级后台管理系统基础模板相关推荐

vue3+vite+antd——后台管理系统——基础模板
2023年了,让我看看谁还不会用vue3,其实我也不太会.... 不会就学啊,别的不说,潜力无穷.下面就把我从网上找到的一个后台管理系统模板放在下面了,需要自取. 该系统模板还是不太完善,后续完善后, ...
【web素材】03-24款后台管理系统网站模板
素材整理 | web前端开发前言在很早之前,也跟大家分享过后台管理系统的模板的内容.今天我们又整理了一期与此相关的内容,一共有24款模板,大家可以根据自己情况进行下载学习. 下面,我们就进入正题内 ...
Web后台管理系统框架模板
这是我最近写的一个后台管理系统的模板,先不废话,还是先看效果图:这样比较直观: 如效果图所示,这个模板主要解决了左侧菜单通过JSON动态创建,以及右侧Tab页的显示关闭,还有顶部导航和左侧菜单的显示隐 ...
SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
Vue + ElementUI 后台管理系统实现主题风格切换
一.目的此次写作内容是在我之前发布一篇文章的基础上进行新增的. 上一篇文章:Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客这次要实 ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
web常用通用组件+Axure后台管理系统框架模板+大屏数据可视化元件库+智慧社区管理系统大屏+图表组件+表单组合+智慧数据看板+通用大屏图表原件库+电脑端常用组件
作品介绍:web常用通用组件+Axure后台管理系统框架模板+大屏数据可视化元件库+智慧社区管理系统大屏+图表组件+表单组合+智慧数据看板+通用大屏图表原件库+电脑端常用组件 Axure原型演示及下载 ...
SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
16款网站后台管理系统html模板代码下载
原文:16款网站后台管理系统html模板代码下载源代码下载地址: http://www.zuidaima.com/share/1834757681105920.htm

vue轻量级后台管理系统基础模板

项目地址

更新

相关依赖

功能

登录页

标签栏

侧边栏

用户相关

动态菜单栏

面包屑

权限控制

其它

注意

子组件跳转到子组件

路由传参

使用

下载

开发

打包

如果对你有帮助，请给个Star

vue轻量级后台管理系统基础模板相关推荐

最新文章

热门文章