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

Easter79
• 阅读 721

项目地址

在线预览

更新日志

相关依赖

功能

登录页

  • 一周七天自动切换不同的壁纸(建议自己配置)

标签栏

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

注意: 组件的名称和路由的名称一定要一致,例如 Home.vue 组件名称 name: home,则在路由文件中也要给它设置为 name: home,否则页面内容不能缓存

// 在router文件中
{
    path: 'home',
    name: 'home',
    component: () => import('../views/Home.vue')
}

// 在Home.vue中
export default {
    name: 'home'
}

侧边栏

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

用户相关

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

动态菜单栏

  • 根据数据动态生成菜单
  • 在菜单项上添加 hidden 属性可以隐藏该菜单项,但还是可以正常访问页面,具体请看 DEMO 及其相关代码

面包屑

  • 展示当前页面的路径

权限控制

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

eslint + vscode 自动格式化代码

具体配置方法请点击上面的链接,如果不需要 eslint,请将相关依赖卸载以及根目录下的 .eslintrc.js 删除。

jest 单元测试

如果不需要,请卸载相关依赖及删除根目录下的 tests 目录

页面标题 document.title

src/utils/index 下可设置默认的 title,在每个路由配置项上可设置对应的 title,具体示例请看代码

其它

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

注意

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

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

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

使用

下载

git clone https://github.com/woai3c/vue-admin-template.git

cd vue-admin-template

npm i

开发

npm run serve

打包

npm run build

打包后的文件不能放在服务器根目录,否则会出现空白页面。

如果确实要把文件放在服务器根目录则需要更改打包的路径,打开 vue.config.js 文件,将如下代码删去即可。

publicPath: './',

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

本文同步分享在 博客“谭光志”(SegmentFault)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k