笔记4：主页布局-侧边栏【Vue实战项目：电商管理系统（Element-UI）】

1 整体布局

2 完成主页-侧边栏

2.1 实现基本的主页布局

• 在 element ui 官网 上查找合适的布局容器
  Home.vue

<template>
  <el-container class="home-container">
    <!-- titlebar -->
    <el-header>Header
      <el-button type="primary" @click="logout">退出登录</el-button>
    </el-header>
    <!-- 正文区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">Aside</el-aside>
      <!-- 正文区域 -->
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

• 导入element相关组件
  element.js

import {
   Container, Header, Aside, Main } from 'element-ui'

Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)

• 绘制背景颜色
  Home.vue

<style lang="less">
.home-container {
   
  height: 100%;
}

.el-header {
   
  background-color: #353d45;
}

.el-aside {
   
  background-color: #64707d;
}

.el-main {
   
  background-color: #dadee2;
}
</style>

2.2 美化主页header区域

• 插入图片，文字

<el-header>
  <div>
    <img src="../assets/logo.png" alt=""