vue element container布局

mian.js
要导入全局css样式global.css

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

import './assets/css/global.css'/* 导入全局样式 */

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

global.css
将高度设置为100%才能撑满整个页面

html,
body,
#app{
    height: 100%;
    margin: 0;
    padding: 0;
}

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'

Vue.use(VueRouter)

const routes = [
  { path: '/', name: 'Home', component: Home }
]

const router = new VueRouter({
  routes
})

export default router

homt.vue

<template>
    <el-container class="home-container">
      <el-header>Header</el-header>
      <el-container>
        <el-aside>Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
  .home-container{/*因为有两个相同的标签,所以要自定义标签*/
    height: 100%
  }
  .el-header{/*可以直接使用elementui的标签作为css选择器*/
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size:20px;
  }
  .el-aside{
    background-color: #333744;
  }
  .el-main{
    background-color: #eaedf1;
  }
</style>