使用ElementUI的container布局容器布局项目

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29918313/article/details/83650445

组件中代码如下：

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>

实现效果如下：

在项目中使用：

APP.vue是主组件，所有页面都在App.vue下进行切换，因此，首先在APP.vue中编写如下代码：

<template>
  <el-container id="app">
    <el-aside width="240px" v-if='showSide' >
      <PageSideMenu />
    </el-aside>
    <router-view/>
  </el-container>
</template>

其中，el-aside是左侧导航栏，之所以有v-if判断，是因为在用户首次登陆系统的时候，有登录界面，此时，左侧导航栏需要隐藏。同时，PageSideMenu是左侧导航栏的组件。

router-view我加载了Login.vue页面的代码，el-main部分写登录框的代码，Login.vue页面结构代码如下：

<template>
  <el-container>
    <el-header><div class="healderTitle">{{}}</div></el-header>
    <el-main>
    </el-main>
    <el-footer><Footer/></el-footer>
  </el-container>
</template>

用户登录之后，进入Home.vue页面，页面结构代码如下：

<template>
  <el-container>
    <el-header>
      <div class="healderTitle">
        <Dropdown></Dropdown>
      </div>
    </el-header>
    <el-main>
      <router-view />
    </el-main>
    <el-footer><Footer /></el-footer>
  </el-container>
</template>

至此，页面结构布局已结束。