安装创建Vue项目和配置
- 安装node.js
- 安装git
- 安装vue-element-admin
- vue.config.js加上lintOnSave:false
课程推荐关闭,我还是推荐打开,可以排除错误 - 运行项目:
npm run dev
配置开发工具和高效代码块
- 配置并配置中文显示:
Chinese - 安装代码提示:
Element UI Snippets
Vue2 Snippets
如何添加菜单
先删除系统自带的多余的菜单
在src/router/index.js中添加;
这里有constantRoutes和asyncRoutes两种路由:
constantRoutes代表那些不需要动态判断权限的路由,如登录页、404、等通用页面。
asyncRoutes: 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面
现在asyncRoutes中添加:
{
path: "/course",
component: Layout,
redirect: "/course/media",
name: "Course",
alwaysShow: true,
meta: {
title: "课程",
icon: "excel",
roles: ['admin', 'editor']
},
children:[
{
path:"media",
name:"Media",
component: ()=>import('@/views/course/media'),
meta: {
title:'图文'
}
},
{
path:"video",
name:"Video",
component: ()=>import('@/views/course/video'),
meta: {
title:'视频'
}
},
{
// hidden: true,
path:"audio",
name:"Audio",
component: ()=>import('@/views/course/audio'),
meta: {
title:'音频'
}
},
{
path:"column",
name:"Column",
component: ()=>import('@/views/course/column'),
meta: {
title:'专栏'
}
},
]
},
如何隐藏菜单,可以在路由中添加hidden属性
{
hidden: true,
path:"audio",
name:"Audio",
component: ()=>import('@/views/course/audio'),
meta: {
title:'音频'
}
},
如何添加图标:设置icon属性
参考:
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/
系统自带图标预览:
https://panjiachen.github.io/vue-element-admin/#/icon/index
示例代码:
path: "/course",
component: Layout,
redirect: "/course/media",
name: "Course",
alwaysShow: true,
meta: {
title: "课程",
icon: "excel",
roles: ['admin', 'editor']
},
如何调整侧边栏的宽度
在src\styles\variables.scss中修改 $sideBarWidth: 150px;