前端首页架构编写

使用的组件

本次前端使用的是Element组件，首页框架中主要用了el-header,img,el-button,el-menu,el-menu-item,el-submenu等组件。
<el-container：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header：顶栏容器。
<el-aside：侧边栏容器。
<img：放置图片。
<el-button,按钮
<el-menu,导航栏菜单菜单内容事件
<el-submenu折叠下拉菜单

具体实现

以学生端的首页为例：
1、用el-container，el-header，el-aside实现页面的布局
2、在el-aside内放置导航栏菜单el-menu，菜单包含el-menu-item和折叠菜单el-submenu，分别对应我们项目的几个主要模块，（个人信息，班级，笔记，工具，知识图谱，教师端和学生端分类有小区别，但是整体布局一样）。el-submenu是可以点击下拉的菜单，例如工具部分，点击工具栏，包含了：图片转文字 ，语音转文字等小模块。如图：

3、实现页面跳转：
用index属性实现页面的跳转
4、点击按钮，退出系统