vue-admin-template 轻量级后台管理系统基础模板 项目简介
项目地址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: '基本资料',
}
]
}
]
}
]相关依赖vue-router iview axios vuex功能登录页一周七天自动切换不同的壁纸(建议自己配置)标签栏点击标签切换页面 刷新当前标签页 关闭其他标签/关闭所有标签侧边栏伸展/收缩 页面宽度过小自动收缩 多级菜单(利用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 [email protected]:woai3c/vue-admin-template.git
cd vue-admin-template
npm i开发npm run dev打包npm run build
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: '基本资料',
}
]
}
]
}
]相关依赖vue-router iview axios vuex功能登录页一周七天自动切换不同的壁纸(建议自己配置)标签栏点击标签切换页面 刷新当前标签页 关闭其他标签/关闭所有标签侧边栏伸展/收缩 页面宽度过小自动收缩 多级菜单(利用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 [email protected]:woai3c/vue-admin-template.git
cd vue-admin-template
npm i开发npm run dev打包npm run build