VueCli 实战在线教育后台系统课程笔记-1

川长思鸟来 2022-11-07 14:51 157阅读 0赞

## 安装创建Vue项目和配置 ##

1.  安装node.js
2.  安装git
3.  安装vue-element-admin
4.  vue.config.js加上lintOnSave:false  
    课程推荐关闭，我还是推荐打开，可以排除错误
5.  运行项目: `npm run dev`

## 配置开发工具和高效代码块 ##

1.  配置并配置中文显示:  
    Chinese
2.  安装代码提示：  
    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;`