代码：

<template>

  <div>
    <!--布局容器-->
      <el-container style="background: crimson;height: 100%;min-height:100vh;" direction="vertical">
        <!--顶部栏-->
        <el-header >
          顶部栏
        </el-header>
        <el-container >
          <!--左侧侧边栏-->
          <el-aside style="background: olivedrab">
            左侧侧边栏
          </el-aside>
          <!--主要区域容器-->
          <el-main style="background: aqua">
            主要区域容器
          </el-main>
        </el-container>
      </el-container>

  </div>
</template>
<script type="text/ecmascript-6">

    // import ElAside from "element-ui/packages/aside/src/main";
    // import ElMain from "element-ui/packages/main/src/main";

    export default {
      // components: {
      //   ElMain,
      //   ElAside},
      data() {
            return {
              message:"你好世界",
            }
        },
        methods:{

        },
    }

</script>
<style>

  /*.el-container{*/
    /*width: 100%;*/
    /*min-height: 600px;*/
    /*height: 100%;*/
  /*}*/
  /*.el-header{*/
    /*background: olivedrab;*/
  /*}*/
</style>
修改App.vue：

<template>
  <!--id="app"-->
  <div  >
    <!--<img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

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

<style>
/*#app {*/
  /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*text-align: center;*/
  /*color: #2c3e50;*/
  /*margin-top: 60px;*/
/*}*/
body{
  margin: 0px;
}

</style>