01 主页-实现主页的基本布局

到element-ui 中找到我们想要的主页布局样例 https://element.eleme.cn/#/zh-CN/component/container

<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>

使用前先引入相关组件 Main, Container,Asider,Header

• element.js

import Vue from 'vue'
// import Element from 'element-ui' //全部导入
import 'element-ui/lib/theme-chalk/index.css'
import {Button, Form, FormItem, Input, Message, Main, Aside, Header, Container} from "element-ui"; // 按需导入

// Vue.use(Element)
//表单的相关组件
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
//基本container 的相关布局组件
Vue.use(Main)
Vue.use(Aside)
Vue.use(Header)
Vue.use(Container)
//全局绑定Message
Vue.prototype.$message=Message

• Home.vue

<template>
    <el-container class="home-container">
        <el-header class="home-header"><el-button @click="logout">退出</el-button></el-header>
        <el-container>
            <el-aside width="200px" class="home-aside">Aside</el-aside>
            <el-main class="home-main">Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Home",
        methods: {
            logout() {
                // 删除本地的token
                window.sessionStorage.clear();
                // 用编程式路由跳转到登录页面
                this.$router.push('/login')
            }
        }
    }
</script>

<style lang="less" scoped>
    // header 的背景色
    .home-header{
        background-color: #242424;
    }
    // 左边栏的背景色
    .home-aside{
        background-color: #262626;
    }
    // 主区域的背景色
    .home-main{
        background-color: #d8d8d8;
    }
    // 布局撑满全屏
    .home-container{
        height: 100%;
    }

</style>