Giter VIP home page Giter VIP logo

vue-admin-template's Introduction

Vue 轻量级后台管理系统基础模板(停止维护,不建议使用)

相关依赖

功能

登录页

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

标签栏

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

注意: 组件的名称和路由的名称一定要一致,例如 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,请将相关依赖卸载以及根目录下的 .eslintrc.js 删除。

如果不需要,请卸载相关依赖及删除根目录下的 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: './',

License

MIT

赞助

vue-admin-template's People

Contributors

dependabot[bot] avatar woai3c avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-admin-template's Issues

退出登录后再次重新登录会报错

报错信息如下:"Uncaught (in promise) Error: Redirected from "/login" to "/home" via a navigation guard"
如果主页有从后端请求的数据也会无法进行获取。

关于标签切换的问题

以前没写过前端,最近关注了这个项目,发现很简单也很实用。
开始没有修改成cil3的时候,点打开过的标签,进行切换时,之前查询的内容都还在,但是fork到最新的后,也就是cil3后,切换标签后,页面的内容都是最初的空白。我想问问能不能像以前一样,标签切回去后,以前查询的内容依然还在。。。

我大致看了下,发现之前用的都是components下的index.vue,是不是因为都是用的index.vue所以查询过的内容得意保存?

注销后登录报错

首次登录后访问Index.vue,会设置axios的响应拦截器
注销后,重定向到登录页面,但axios的响应拦截器还有效,后台响应登录返回的结果与首次登录就不一样了
可以考虑注销时也清空掉axios的响应拦截器

开发环境npm run serve可以跨域访问,正式环境打包npm run build后不能跨域访问

config配置了
publicPath: './',
'/api': {
target: 'http://127.0.0.1:8083/',
*****
}
axios配置访问
this.$axios.post('/api/testData', {}).
开发环境没错,正式环境前端tomcat8081报错,java后台还是8083端口接口
http://127.0.0.1:8081/api/testData
Failed to load resource: the server responded with a status of 404 (Not Found)。
访问地址没有代理成http://127.0.0.1:8083/testData
这些参数都加了,想知道这个怎么解决?

项目后续情况

非常感谢分享这么好的项目,想请问下后续是否有迭代计划。

对接后端接口

你好,非常感谢你的模板,现在我们那个左侧菜单,要对接真实的接口,请问应该怎么做比较好

怎么在请求头中放数据

假设我要在请求头中放:Authorization: Bearer
那么在api那个目录下的发请求的API应该怎么调整呢?

我想请教一下

刚进入时的登陆页面是怎么来的,为什么index.vue没有配置路由?请教一下,谢谢

二级路由的组件如何加载?

//流量管理
flow: {
	path: '/flow',
	redirect: 'flow/flowGather',
	meta: {title: 'flow'},
	children: [
		//流量管理 - 流量采集
		{
			path: 'flowGather',
			name: 'flowGather',
			meta: {title: 'flowGather'},
			component: () => import('../views/ddos/flow/flowGather.vue'),
		},
		//流量管理 - 流量分析
		{
			path: 'flowAnalysis',
			name: 'flowAnalysis',
			meta: {title: 'flowAnalysis'},
			component: () => import('../views/ddos/flow/flowAnalysis.vue'),
		},
		//流量管理 - 流量限制 -- ipblock
		{
			path: 'flowRestriction/ipblock',
			name: 'ipblock',
			meta: {title: 'ip封锁'},
			component: () => import('../views/ddos/flow/flowrestriction/ipblock/ipblock.vue'),
		},
	]
},

tree命令输出如下:
.
├── flow
│   ├── flow.vue
│   ├── flowAnalysis.vue
│   ├── flowGather.vue
│   └── flowrestriction
│   └── ipblock
│   └── ipblock.vue
├── sniffeSettings
│   ├── config
│   │   └── tcpdump_config.vue
│   └── taskManager
│   └── tsm
│   └── tsm.vue
└── srm
└── srm.vue

权限控制

这里有实现类似 超级管理员和普通用户的权限控制吗,看了文章然后来看代码,发现并没有这个功能实现诶

跳到一个单独的路由页面,是在哪里设置的?

text: '单独的路由', // 点击侧边栏跳到一个单独的路由页面,需要提前在 router.js 定义
这个注释说明,我在项目里看了一遍,和其它菜单代码设置都是一样。
不知道这个效果,是要单独设置什么参数?

左侧边栏的图标怎么设置

    menuItems: [
        {
            name: 'home', // 要跳转的路由名称 不是路径
            size: 18, // icon大小
            type: 'md-home', // icon类型
            text: '主页', // 文本内容
        },

类似这个md-home是存在哪里,怎么自定义?

关闭eslint

这个可以写的更详细些么?现在一关闭就报错。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.