Vue2 + element-ui后台管理项目—主页布局

第一章-项目初始化
第二章-登录/退出功能
第三章-Git提交代码

---

主页布局

---

一、主页整体布局

element-ui组件库中找到 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>

把button按钮放到el-header里面

<el-container>
    <!-- 头部区域 -->
    <el-header>Header<el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
       <!-- 侧边栏 -->
       <el-aside width="200px">Aside</el-aside>
       <!-- 右侧内容主体 -->
       <el-main>Main</el-main>
    </el-container>
</el-container>

在element-ui中导入这些组件并注册为全局组件

import Vue from 'vue'
import {
   
    Button, Form, FormItem, Input, Message, Container, Header, Aside, Main } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.prototype.$message = Message

注意：每一个element-ui中提供的组件的组件名就是类名，直接加类选择器
给el-container添加一个自定义class，用于设置容器撑满全屏

<style lang="less" scoped>
.home-container{
   
   
  height: 100%;
}
.el-header{
   
   
  background-color: #373d41;
}
.el-aside{
   
   
  background-color: #333744;
}
.el-main{
   
   
  background-color: #eaedf1;