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

40次阅读

共计 784 个字符，预计需要花费 2 分钟才能阅读完成。

vue-admin-template
vue 轻量级后台管理系统基础模板在线预览
相关依赖

vue-router
iview
axios

功能
登录页
一周七天自动切换不同的壁纸（建议自己配置）
标签栏

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

侧边栏

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

用户相关

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

其它
利用 axios 拦截器实现了 ajax 请求前展示 loading 请求结束关闭 loading
注意
源码可见并且添加了必要的注释可以自行更改
为了实现标签栏切换页面有一个要求必须是要遵守的：Index.vue 的 data 数据里有一个 nameToTitle 属性
nameToTitle: {
Table: ‘ 表格 ’,
Password: ‘ 修改密码 ’,
UserInfo: ‘ 基本资料 ’,
Msg: ‘ 查看消息 ’,
Home: ‘ 首页 ’
}
其中 key 是组件的名称值是要展示在标签栏上的标题其中组件的名称和路由的名称必须要一一对应假如你有一个组件是 Home.vue name 为 Home 在路由的 index.js 它的 name 也必须是 Home
const Home = () => import(‘@/components/Home/Home’)
export default new Router({
routes: [
{
path: ‘/home’,
name: ‘Home’,
component: Home,
}
]
})
市面上有大量的 vue 后台管理系统模板但是功能都太丰富了而且有很多组件用不上所以写了这么一个最基础的只有必要功能的模板 UI 库使用的是 iView 有大量的组件可用
使用
下载
git clone git@github.com:woai3c/vue-admin-template.git