前端首页架构编写

使用的组件

本次前端使用的是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、点击按钮,退出系统

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值