前言

在vue框架中可以进行组件式开发，尽量将同样的功能封装到一个组件中，以便减少代码量和增加代码可读性。

本期我们便来看看前端主页面中的各个组件。

从router/index.js中，我们找到重定向页面中调用的组件layout，此文件对应于src/layout/index.vue文件。这个页面中定义主页面的结构和内容。

组件构成

从components中我们获取此vue文件调用的组件。

我们来看一下各种组件的功能。

1. AppMain

此组件用于封装页面中显示的主要内容。组件中将this.$route.path路由作为key值传入router-view，从而控制页面的指向。同时，使用keep-alive组件，保持打开新页面时不会被覆盖。

2. Navbar

此组件控制的是顶部工具栏。其中Breadcrumb控制侧边栏的折叠，Hamburger则是控制当前页面名称的显示。Screenfull控制全屏显示，SizeSelect控制布局大小。Search是用来搜索所有菜单并跳转。RuoYiGit、RuoYiDoc则是单纯的网页跳转。

3. RightPanel

此组件控制是否显示系统布局设置。使用slot插槽模式，控制settings主题设置组件。

4. Settings

此组件用于设置主题风格和系统布局。ThemePicker组件用于切换主题颜色。使用v-model绑定布局设置相关变量，将这些数值传入state中，其余组件再从state中获取数据、切换布局方式。

5. SideBar

此组件为左侧菜单栏。使用el-menu作为外围菜单，子项选择封装的SidebarItem组件。探究SidebarItem组件，可以发现其中使用递归算法，遍历所有菜单项。

6. TagsView

此组件是用于控制已打开页面跳转。组件开启时，会开始记录打开的router，并显示在一行中，可以点击直接跳转。若关闭此功能，则组件不显示，则router记录也停止。

小结

简略概括，前端页面主要部分有：菜单栏、主页面、工具栏（兼账号管理），这些部分构成较为完善的前端功能体系。此基础上，为提升用户体验，ruoyi添加了主题切换、布局设置、页面记录等功能。