vue3:十一、主页面布局(实现基本左侧菜单+右侧内容效果)

一、实现效果

二、初始搭建

1、官网参考

Container 布局容器 | Element Plus

实现如下的效果

首先实现左侧导航，右侧内容效果

基本框架代码

2、视图层

①基本框架

<template>
    <el-container class="layout-container-demo" style="height: 100vh">
        <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>
</template>

②Footer编写

底部一般是写入版权信息之类的信息

<!-- 底部信息 -->
<el-footer class="flex flex-center">
  <span>@2025-2030 wen</span>
</el-footer>

③Main编写

Main是核心内容，是起到点击左侧菜单，将内容展示到右侧内容

这里使用<RouterView /> 调出路由中的定义的页面，由于右侧内容比较丰富，所以需要采用滚动条模式<el-scrollbar>...</el-scrollbar>

<!-- 右侧内容 -->
<el-main>
  <el-scrollbar>
    <RouterView />
  </el-scrollbar>
</el-main>

 ④header编写

header主要是头信息，这里的内容可以参考官网给的例子，暂时直接复制

代码如下

<el-header style="text-align: right; font-size: 12px">
  <div class="toolbar">
    <el-dropdown>
      <el-icon style="margin-right: 8px; margin-top: 1px">
        <setting />
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>View</el-dropdown-item>
          <el-dropdown-item>Add</el-dropdown-item>
          <el-dropdown-item>Delete</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <span>Tom</span>
  </div>
</el-header>

⑤aside编写

三级菜单示例

在侧边栏容器aside中

• 首先为内容区域添加滚动条
• 定义一个菜单容器el-menu,设置默认菜单展开项1，2项目:default-openeds="['1', '2']"
• 遍历一级标题，首先用template去循环，可能涉及到不存在子项的菜单，就要用不同的标签。template循环<template v-for="(item, index) in menu" :key="index">：遍历 menu 数组，item 是当前菜单项，index 是当前索引。:key="index": 为每个菜单项设置唯一的 key
  • 一级菜单含有二级子菜单：<el-sub-menu v-if="item.children && item.children.length > 0" :index="`${index + 1}`">：使用可展开的子菜单容器el-sub-menu，判断如果存在子菜单是展示，并设置菜单项索引从1开始
    • 定义二级子菜单的标题：

      <template #title>      一级菜单的标题部分

              <el-icon v-if="item.icon">    标题的图标定义标签

                      <component :is="item.icon" />    图标引入，采用动态加载图标组件

              </el-icon>

              { { item.name }}  标题的名称

      </template>

    • 遍历二级标题，仍然用template去循环(存在三级菜单)，