手把手教你用VUE(X)写后台管理系统.（一）左侧菜单栏

以下代码仅供参考，建议自己多敲
1.用vue create xxx 命令新建一个文件(前提你的电脑上已经安装过vue)
2.写这个后台我们需要用element-ui，不懂的一定要去官方文档看一哈，本节的内容主要是先生成一个最基本的框架，实现子路由的页面跳转
写这个后台肯定会涉及到很多路由，
每个文件夹存放的文件
src/router/index: 存放、引入路由
src/views/ 新建每个页面的路由
plugins/ element下载后自动生成的
手把手教你用vue(x)写后台管理系统(二)-菜单渲染

1.登陆页

1.1 登陆页（页面，后面再做功能）

router文件里的index.js 是存放路由文件的

  {
    path:'/login',
    component:login
  }
]

1.2 view中新建一个登陆路由login.vue

  <div>登陆</div>
</template>

1.3 在router-index.js 中引入

import login from '@/views/login.vue'
引入之后把项目启动

1.4 首页

登陆页面做好后之后，我们就要进去首页
在router-index.js中 引入首页路由

    path:'/',
    component:index
  }

1.4.1 404页面不存在

接着和登陆路由一样，在views中新建index.vue，然后在router-index.js中引入

ps:如果我们访问了一个不存在的页面呢？ 这就需要新建一个404页面，当我们访问不存在的路由时，将页面跳转到404

   path:'/*',
   component:()=>import('@/views/error/404.vue')

注意: /* 的意思是匹配所有，不能把这个放在其他路径的上面，一旦把这个放上面 就会匹配不到其他的路由了，前面的优先级更高

2.布局

首页中搭建我们想要的结构,在src新建一个lauout(布局)文件夹
我们要清楚，我们要的页面布局是什么样的，是整体上下左右布局还是其它,然后在element-ui中找布局
Container布局容器:
el-container：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。(具体查element-ui 文档)
el-header：顶栏容器。
el-aside：侧边栏容器。
el-main：主要区域容器。
el-footer：底栏容器.

2.1 然后在新建的Layout中新建一个index.vue，然后利用 局部注册 ，在首页路由中

import Layout from '@/Layout'   //index比较特殊，在这里可以省略
components:{
    Layout
  }
记得写<Layout></Layout>标签

2.2 接下来我们只需要在/Layout/index.vue中写布局了（提前下载好element组件，最新命令: vue add element,下载好后，把自动生成的app.vue里的东西删了）

<!-- 外层容器 -->
  <el-container>  
    <!-- 侧边栏容器 -->
    <el-aside> 左侧</el-aside> 
    <!-- 外层容器 -->
  <el-container>
    <!-- 顶栏容器 -->
    <el-header>头部</el-header>
    <!-- 主要区域容器 -->
    <el-main></el-main>
  </el-container>        
  </el-container> 

2.3 在layout/index.vue/中, 找到er-main标签 ,因为这里面的内容未来要切换，所以要给他加上keep-alive标签

<keep-alive></keep-alive>
keep-alive用法:
activated:   keep-alive组件激活时调用
deactivated: keep-alive组件停用时调用
<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
<keep-alive> 是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中
当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行

<el-main>
       <keep-alive>
        <!-- 这个router-view里的内容未来要切换，所以给他加上keep-alive -->
        <router-view :key="$router.fullPath"></router-view>
      </keep-alive>
</el-main>

2.5做到这里后，就会产生很多细节错误，比如页面的高度不