vue element container布局

古城微笑少年丶 2022-10-29 14:21 217阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsYXJvamE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsYXJvamE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/8327ac8afd024440aa99beebe2ba4696.png