element ui logo 举例_vueelementadmin源码解读之Siderbar侧边栏logo

vue-element-admin的源码还是比较简单的，我们只要耐下性子一点点的磨，肯定能理解透的。

通过阅读手册和分析源码，以及结合devTools，我们可以很轻易的得到框架的布局如下：

------------

布局分为三部分，侧边栏、顶部导航和主体内容区域，我们这节课先来分析一下侧边栏Siderbar。

文件位于src/layout/components/Sidebar/index.vue，整体分为上下两个部分，上部为logo信息(默认不显示)，下部为菜单栏。

我们先来说一下比较简单的logo，这个组件位于src/layout/components/Sidebar/Logo.vue，里面的内容也是比较简单，主要由两个router-link组成，这两个router-link只能同时显示一个，前者是logo和文字二选一，后者是文字必显示，logo显示与否由变量logo控制，点击Logo后跳转到后台首页。

至于这两个router-link显示哪一个则由变量collapse控制，注意这里面有一个key，这是为了让两个router-link不被同时渲染用的，具体可以百度v-if key。

<template>  <div class="sidebar-logo-container" :class="{'collapse':collapse}">    <transition name="sidebarLogoFade">      <router-link v-if="collapse" key="collapse" cla