5. 【Vue实战--孢子记账--Web 版开发】-- 主页UI

我们在实现个人中心的时候简单的搭建了一个主页UI，但是这个主页并不是我们需要的，在这一节我们将一起实现主页UI的搭建。

一、功能

主页UI的原型如下:

首页UI原型包括左侧菜单和顶部header，左侧菜单包含多个功能模块的链接：首页、账本、报表、收支分类配置、预算设置配置、主币种配置，这些模块是目前我们要实现的所有功能模块。顶部Header包括左侧孢子记账的Logo以及右侧的个人头像。

二、实现

要实现首页的菜单和顶部Header我们需要用到element plus 的el-menu组件，实现原型图上这种布局方式我们要用到布局组件el-container。下面我们一一实现。

2.1 布局

el-container是 Element Plus 中提供的一个布局容器组件，主要用于构建响应式页面结构。通过与el-header、el-footer、el-aside和el-main等组件搭配使用，el-container能够快速帮助开发者实现常见的页面布局。它的主要作用是定义一个基础的容器框架，开发者可以在其中组织其他布局组件，以达到预期的页面结构。

在使用el-container时，通常是将其作为外层容器包裹住其他布局组件，比如顶部的el-header、主内容的el-main和底部的el-footer。这类布局非常适用于常见的网页结构，尤其是带有固定头部和页脚的页面。此外，el-aside组件可以用来实现侧边栏，进一步丰富页面布局。el-container默认是水平布局，通过设置direction属性为vertical，也可以实现垂直布局。

下面是一个基础的例子：

<template>
  <el-container style="height: 100vh;">
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main content</el-main>
    </el-container>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

在上面的例子中，el-container外部包裹了页面的各个部分，el-header表示顶部区域，el-footer表示底部区域，而中间的部分是另一个el-container，它包含了el-aside（侧边栏）和el-main（主内容区域）。这种布局结构适合做有侧边栏的管理后台页面。el-aside和el-main可以根据需要调整宽度和样式，实现左右布局。

那么如果需要更灵活的控制，可以通过direction属性调整布局的方向。默认情况下，el-container采用的是水平布局，这意味着所有内部组件会依次横向排列。如果希望实现垂直排列，可以设置direction="vertical"，让布局从上到下排列。例如：

<template>
  <el-container direction="vertical" style="height: 100vh;">
    <el-header>Header</el-header>
    <el-main>Main content</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

这种布局通常用于简单的页面，没有复杂的侧边栏需求。在实际开发中，el-container配合el-header、el-aside、el-main和el-footer等组件，能够快速构建起各种响应式布局，适应不同的屏幕尺寸和需求，非常适合在后台管理系统或单页应用中使用。

下面我们就用el-container来实现我们的首页UI。根据原型分析，我们可以得出外部放置一个大的el-container，接着在内部防止一个el-header用来防止顶部的Header，接着再放置一个el-container，它的内部是放置左侧的菜单el-aside和右侧功能区域el-main，下面是已经实现的布局代码：

<div class="main">
    <el-container>
        <el-header>
        </el-header>
        <el-container>
            <el-aside width="200px">
            </el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</div>

通过上面的代码我们就实现了原型图的布局方式。

2.2 菜单以及header

要实现菜单和header功能，我们要用到el-menu组件。el-menu是 Element Plus 中的导航菜单组件，广泛用于构建网站或应用中的侧边栏、顶部导航栏或其他菜单布局。它提供了丰富的功能来帮助开发者构建各种交互式菜单，支持嵌套、分组、图标、跳转等多种场景。通过el-menu开发者可以很容易地创建一个结构清晰且响应式的导航菜单。在实际使用中，el-menu可以与el-menu-item、el-submenu等子组件结合使用，来定义菜单项和子菜单。菜单项el-menu-item用于表示单个菜单项，而子菜单el-submenu则用于嵌套多个菜单项，通常用于实现多级菜单结构。每个菜单项都可以绑定一个index，并通过router或click事件触发相应的路由跳转或功能操作。

比如我们现在要实现一个简单的顶部导航栏时，可以使用el-menu来承载菜单项。我们可以通过mode属性来指定菜单的布局方式，horizontal模式常用于顶部导航栏，而vertical模式常用于侧边栏导航。在水平模式下，菜单项会横向排列，适合放置在页面的顶部，而在垂直模式下，菜单项则会按竖直方向排列，通常用于侧边栏。下面是一个简单的侧边栏菜单示例：

<template>
  <el-menu mode="vertical" default-active="1">
    <el-menu-item index="1">Home</el-menu-item>
    <el-menu-item index="2">About</el-menu-item>
    <el-submenu index="3">
      <template #title>Services</template>
      <el-menu-item index="3-1">Web Development</el-menu-item>
      <el-menu-item index="3-2">App Development</el-menu-item>
    </el-submenu>
    <el-menu-item index="4">Contact</el-menu-item>
  </el-menu>
</template>

在上面的例子中el-menu设置为垂直模式mode="vertical"，菜单项使用了el-menu-item，而el-submenu用于实现子菜单。每个菜单项都通过index来标识，在用户点击时会触发对应的事件。default-active用来设置默认选中的菜单项，通常是根据路由来动态更新这个值，以保持菜单的选中状态。

同时el-menu还支持动态高亮、图标、禁用项、折叠面板等多种功能。例如我们可以通过icon属性为菜单项添加图标，或者利用collapse属性控制菜单的展开和收起。它还能够结合 Vue Router 使用，实现与页面路由的绑定，自动切换菜单的选中状态。

下面我们就用el-menu实现原型的菜单和Header，我们在第一个el-header中设置header，代码如下：

<el-menu mode="horizontal" :ellipsis="false">
    <el-menu-item>
    <img
        style="width: 180px"
        src="/src/assets/logo.png"
        alt="Element logo"
    />
    </el-menu-item>
    <el-sub-menu>
    <template #title>
        <el-avatar :size="40"/>
    </template>
    <el-menu-item @click="resetPasswordFormVisible=true">重置密码</el-menu-item>
    <el-menu-item @click="securitySettingFormVisible=true">安全设置</el-menu-item>
    <el-menu-item @click="personalInformationFormVisible=true">修改用户名</el-menu-item>
    <el-menu-item @click="deleteUser">注销账户</el-menu-item>
    <el-menu-item @click="logout">退出</el-menu-item>
    </el-sub-menu>
</el-menu>

在上面代码中的重置密码、安全设置、修改用户名、注销账户以及退出功能在上一篇文章中我们以及实现了，这里就不讲解了。

在第二个el-header中我们把左侧菜单放在里面，代码如下：

<el-menu
    default-active="2"
    id="mainMenu"
>
    <el-menu-item index="1">
        <el-icon>
        <location/>
        </el-icon>
        <template #title>首页</template>
    </el-menu-item>
    <el-menu-item index="2">
        <el-icon>
        <Collection/>
        </el-icon>
        <template #title>账本</template>
    </el-menu-item>
    <el-menu-item index="3">
        <el-icon>
        <PieChart/>
        </el-icon>
        <template #title>报表</template>
    </el-menu-item>
    <el-sub-menu index="4">
        <template #title>
            <el-icon>
                <setting/>
            </el-icon>
            <span>配置</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="4-1">收支分类</el-menu-item>
            <el-menu-item index="4-2">预算设置</el-menu-item>
            <el-menu-item index="4-3">主币种设置</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
</el-menu>

在上面的代码中，我们设置了这次要实现的功能，以及给每个大功能模块设置了icon。到目前为止我们就完成了首页UI的开发。

三、总结

在本节中，我们通过使用 Element Plus 的组件来实现个人中心的主页 UI。首先，原型图包括了左侧菜单和顶部 Header，菜单包含多个功能模块如首页、账本、报表等，Header 则包含了 Logo 和个人头像。为实现这个布局，我们使用了 el-container 布局组件，并配合 el-header、el-aside 和 el-main 来实现响应式页面结构。同时，我们采用 el-menu 组件来构建左侧菜单和顶部导航栏，菜单项通过 el-menu-item 和 el-submenu 组件实现，支持嵌套和功能操作。最终，通过这些组件的组合，我们成功实现了一个功能齐全且响应式的主页 UI。