vue layout布局的代码 要求 element 一个后台管理模板

以下是一个基于 Element UI 的后台管理模板的 Vue 布局代码示例：

<template>
  <div class="app-container">
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header height="60px">
        <div class="app-logo">Logo</div>
        <div class="app-nav">导航栏</div>
        <div class="app-user">用户信息</div>
      </el-header>
      
      <!-- 主体内容 -->
      <el-container>
        <!-- 左侧菜单栏 -->
        <el-aside width="200px" class="app-menu">
          <el-menu :default-openeds="defaultOpeneds" :default-active="defaultActive" unique-opened active-text-color="#409EFF" background-color="#FFFFFF" text-color="#606266" active-color="#409EFF">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>导航二</span>
              </template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        
        <!-- 右侧主体内容 -->
        <el-main class="app-main">
          <router-view></router-view>
        </el-main>
      </el-container>
      
      <!-- 底部版权信息 -->
      <el-footer height="60px">
        版权信息
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultOpeneds: [], // 默认展开的菜单项数组
      defaultActive: '', // 默认选中的菜单项
    }
  },
  mounted() {
    // 从路由中获取默认选中的菜单项
    this.defaultActive = this.$route.path
    // 从菜单配置中获取默认展开的菜单项数组
    this.defaultOpeneds = this.$store.getters.menuOpenedList
  },
}
</script>

<style>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-logo {
  font-size: 24px;
  color: #FFFFFF;
}
.app-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}
.app-user {
  font-size: 14px;
  color: #FFFFFF;
  margin-right: 20px;
}
.app-menu {
  padding: 10px;
  background-color: #F8F8F8;
}
.app-main {
  padding: 10px;
}
</style>

以上代码实现了一个基于 Element UI 的后台管理模板的布局，包括顶部导航栏、左侧菜单栏、右侧主体内容和底部版权信息等部分。其中使用了 Element UI 的组件，如 `el-container`、`el-header`、`el-aside`、`el-menu`、`el-submenu`、`el-menu-item`、`el-main` 和 `el-footer` 等，实现了响应式的布局，适应不同的设备屏幕大小。