src目录

│  App.vue  根组件
│  main.js  入口js
├─assets 资源目录
│      logo.png      
├─component 公用或者全局组件目录
├─filter    全局过滤器目录
├─page  页面视图目录
├─router 路由目录
├─store 状态管理目录
├─util  工具目录
└─vendor 第三方目录

home页面

page目录下创建Home.vue

<template>

 <el-row class="container">

         

    <!-- 页面头部 通栏宽度100%高度60px-->
    <el-col :span="24" class="header">
             
           <!-- logo 展开的时候是320px,关闭的时候是60px -->
          <div class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
            {{collapsed?'':systemname}}
          </div>
           
          <!--  图标，点击collapse or expand  -->
          <div class="tools" @click="collapsed=!collapsed"> <!-- 开关按钮 -->
              <!-- 字体图标 -->
          <i :class="collapsed?'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
          
          </div>
            
            <!-- user icon and loginout -->
          <div class="userinfo">
                     <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner"><img :src="userimg" />King</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item ><i class="el-icon-setting"></i>  个人信息</el-dropdown-item>
                        <el-dropdown-item ><i class="el-icon-circle-cross"></i>  退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
          </div>
    </el-col>









   
   <!-- 页面主体 宽度100% 高度100%-60px -->
    <el-col :span="24" class="main">  
        <!-- aside最大宽度230px;最小宽度60px; -->
        <!-- 左侧菜单 -->
         <aside :class="collapsed?'menu-collapsed':'menu-expanded'"></aside>

          

         <!-- 其他页面渲染位置 -->
         <article>d</article>


    </el-col>

</el-row>


</template>

<script>
export default {

  name: 'Home',
  data () {
    return {

        collapsed:false ,//侧边栏默认是expanded
        systemname:"KINGADMIN",//系统的名称，当做logo显示
        userimg:'./src/assets/63885668tw1dtxtodpk6ej.jpg'
    };
  }
};
</script>

<style >

.container{
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}
.container>.header{
    height: 60px;
    line-height: 60px;
    background: #7e57c2;
    color:#fff;
}

.container>.header>.logo{
      height: 60px;
      text-align: center;
      font-size: 20px;
      border-right: solid #fff 1px;
      color: #fff;
      line-height: 60px;
    }
    
 .container>.header>div{
    display: inline-block;
 }
  /*  expand width*/
.container>.header> .logo-width{
      width:230px;
    }

    /*collapse wdith*/
.container>.header>.logo-collapse-width{
      width:60px;
      height: 0px;/*按钮掉落问题*/
    }

.container>.header>.tools{
      padding: 0px 10px;
      width:25px;
      position: relative;
      font-size: 20px;
}


    .userinfo{
      float: right;
    }
    .userinfo .el-dropdown{
      float: right;
    }
    .userinfo-inner{
      float: right;
      color: #fff;
    }
    .userinfo-inner img{
      width: 40px;
      height:40px;
      border-radius: 20px;
      margin: 10px 30px 10px 10px;
      float: right;
    }
/*header结束*/


/*flex布局*/
.main{
    display: flex;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;

  }
/* 左侧菜单砍断*/
 aside.menu-collapsed{
      flex: 0 0 60px;/*不放大缩小，宽度为60px;*/
      width: 60px;
    }
 aside.menu-expanded{
      flex: 0 0 230px;
      width: 230px;
    }
 aside{
    background: #ccc;
 }

 article{   
      flex: 1; /*占据剩余位置*/
      overflow-y: scroll; /*出现滚动条*/
      padding: 0px 10px;
 }
</style>

image.png