This is the NTH day of my participation in the August Wen Challenge.More challenges in August
preface
Component development can be carried out in the VUE framework, as far as possible to encapsulate the same function into a component, in order to reduce the amount of code and increase the code readability.
In this installment we’ll take a look at the various components of the front home page.
From router/index.js, we find the component layout called in the redirected page, which corresponds to the SRC/Layout /index.vue file. This page defines the structure and content of the main page.
components
From components we get the component called by this vue file.
Let’s look at the functions of the various components.
1. AppMain
This component is used to encapsulate the main content displayed on the page. The component passes this.$route.path route to the router-view as a key to control the direction of the page. Also, use the keep-alive component to keep new pages from being overwritten when opened.
2. Navbar
This component controls the top toolbar. The Breadcrumb controls the folding of the sidebar and the Hamburger controls the display of the current page name. Screenfull controls full screen display, SizeSelect controls layout size. Search is used to Search all menus and jump. RuoYiGit and RuoYiDoc are simple webpage jumps.
3. RightPanel
This component controls whether system layout Settings are displayed. Controls the Settings theme setting component using slot slot mode.
4. Settings
This component is used to set theme style and system layout. The ThemePicker component is used to switch theme colors. Use the V-Model binding layout to set up relevant variables, pass these values into state, and the rest of the components get data from state and switch layouts.
5. SideBar
This component is the left menu bar. Using el-Menu as the peripheral menu, the child selects the encapsulated SidebarItem component. Exploring the SidebarItem component, you can see that it uses a recursive algorithm to traverse all menu items.
6. TagsView
This component is used to control open page jumps. When the component is started, it records the opened router and displays it in a line. You can click to jump to the router. If this function is turned off, the component is not displayed and router logging stops.
summary
In brief, the main parts of the front-end page are: menu bar, main page, toolbar (and account management), which constitute a relatively perfect front-end function system. To improve the user experience, Ruoyi has added features such as theme switching, layout Settings, and page recording.