从vue-element-admin中抠出来左右布局，面包屑，多标签等

人多侥幸，总觉得自己是例外，看到了别人看不到的东西

序言

  学习Vue-Element-Admin开源项目，抽出来的vue后端模板，包括基础的左右布局，svg图标，面包屑，多标签等。只要按照路由规则添加页面即可进入开发。

代码放在https://gitee.com/siumu/vue-study.git

  像我这种学了没两天的半吊子前端水平上来就看人家大佬写的开源项目着实有点费时间，所以我就把学习记录下来。在学习vue-element-admin之前，我们需要了解并知道以下知识点

• vue的基础知识，比如各种指令的用法
• Vuex状态管理
• vue-router路由管理
• scss或者sass了解一下
• ......
  接下来我们把这个开源项目拉取下来https://github.com/PanJiaChen/vue-element-admin.git，看看人家的源代码。

vue.config.js配置文件

  打开vue.config.js文件，这里面是写vue的一些配置。我们先看能看懂的。

'use strict'
//node内置模块
const path = require('path')

/**
 * 将文件解析成绝对路径
 * @param dir
 * @returns {string}
 */
function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {

    devServer: {
        port: 80
    },
    configureWebpack: {
        name: 'vue-admin-study',
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    }
}

这个配置就少了很多，大家一看就应该知道了，就是设置一下端口号，给src文件夹起一个别名，当然，还有这个name用在什么地方呢？我们在它源码里找到public文件夹里的index.html文件。

这不就用到了嘛，就是页面的title。不信的话可以把自己项目的这个地方改个名字，启动看看。

布局

  好了，接下来就是页面布局了，也就是layout，一个侧边栏，一个头部，一个主页。作者还是写了很多东西的。

光一个布局都写了这么多组件，不过虽然写的组件多，但是我们仔细看看源码还是能够明白一点的。
首先我们看layout/index.vue文件

我们看到这个代码还能挺清晰地，从上到下，依次是侧边栏，头部面包屑等，多标签，页面主体。

侧边栏

  接下来我们开始看侧边栏，分析一下大佬的设计，我们把那些花里胡哨的去掉，就只剩下这么几个组件。
  侧边/Sidebar/index.vue里就是一个for循环，循环一个路由数组(permission_routes)

而侧边栏的每一个导航都封装成了一个SidebarItem.vue组件。我们进入这个SidebarItem.vue组件发现，这里就是判断这个菜单有没有子菜单，有子菜单就生成el-submenu，没有子菜单就生成el-menu-item。

而el-menu-item的具体的名称和图标显示又用item函数式组件封装了起来，并且判断了一下是elementUI的图标还是自定义的svg图标。

  这样一来，关于侧边栏的组件的作用就清楚了。Item组件负责展示导航菜单的文字与图标，SidebarItem组件负责解析这是一个一级导航还是多级导航，Sidebar下面的index组件负责遍历用户的动态路由表(一般来说，一个用户能够访问的导航菜单是由后端传过来的，前端接收到之后动态生成导航菜单)。
这样一来，我们就能很简单的将该项目的左右布局，头部面包屑，多标签等抠出来。

生成路由

@/permission.js文件是全局路由守卫，处理路由变化，以及根据用户信息动态生成路由，关键代码：

const { roles } = await store.dispatch('user/getInfo')
// 根据角色获取动态路由
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

router.addRoutes(accessRoutes)

当我们的需求跟它的生成路由的规则不太一样的时候，我们就可以在@/store/module/permission.js文件里重写它的路由生成方法。

好了，这些基本上就算抠出来完了。