第七章 项目布局实现（7.2）——布局结构实现

7.2 布局结构实现

1. 在 src/layout/index.vue 组件中定义布局：左侧菜单、右侧头部、右侧主区域

   参考：https://element-plus.org/zh-CN/component/container.html

   <script setup lang="ts"></script>
   
   <template>
     <el-container>
       <!-- 左侧菜单区域 -->
       <el-aside> 左侧菜单区域 </el-aside>
       <!-- 右侧区域 -->
       <el-container>
         <!-- 右侧头部区域 -->
         <el-header> 右侧头部区域 </el-header>
         <!-- 右侧主区域 -->
         <el-main> 右侧主区域 </el-main>
       </el-container>
     </el-container>
   </template>
   
   <style scoped></style>
   

   当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

2. 在 src/layout 目录下新建3个子目录 layoutAside 、 layoutHeader 、 layoutMain</