VUE全家桶项目实战-- 4.后台首页布局

一.页面布局

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

效果如下图所示:

二.创建Home组件

在components 路径下新建 Home.vue 文件

<template>
  <el-container class="home_container">
    <!-- 头部区域 -->
    <el-header>
      <div class="header_logo">
        <img src="../assets/mclogo2.jpg" alt />
      </div>
      <span class="header_logo_span">*****</span>
      <el-button type="info" @click="logout" size="small">退出</el-button>
    </el-header>
    <el-container>
      <!-- 导航栏 
		:width 三目运算符,不同状态下导航栏的宽度
		-->
      <el-aside :width="isCollapse ? '58px' : '200px'">
        <div class="toggle_button" @click="toggleCollapse">|||</div>
        <!-- 
                    unique-opened 每次只打开一个submenu
                    collapse 展开折叠效果
                    collapse-transition 是否展开折叠动画
                    background-color 背景颜色
                    text-color 文字颜色
                    active-text-color 选中文字颜色
        -->
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>账户管理</span>
            </template>
			<!--
				index 点击跳转到额页面,再路由的index.js文件中/home路径下配置相应的路径
			-->
            <el-menu-item index&