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

安装创建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;