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

• 授权协议: MIT
• 开发语言: JavaScript
• 操作系统: 跨平台
• 软件首页: https://github.com/woai3c/vue-admin-template
• 软件文档: https://github.com/woai3c/vue-admin-template/blob/master/README.md
• 官方下载: https://github.com/woai3c/vue-admin-template

软件介绍

项目地址

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 有大量的组件可用

子组件跳转到子组件

// 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.git

cd vue-admin-template

npm i

开发

npm run dev

打包

npm run build

本文地址：https://codercto.com/soft/d/1625.html