1. The top bar often forms a component alone, so create a new CommonHeader.vue in the components folder under the src folder
The relevant codes are as follows: [Note, because the left and right areas of the top bar are often divided to achieve different functions]
<template>
<div class="header-container">
<!-- 顶栏的左侧内容 -->
<div class="l-content"></div>
<!-- 顶栏的右侧内容 -->
<div class="r-content"></div>
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>2. Register the CommonHeader.vue component in Main.vue and use it
Open the page and modify the style according to the UI
3. The following introduces the key points of this section: Realize the top bar button based on Vuex and realize the collapse of the left navigation bar
First do the preparatory work and search for the vuex official document
Open the official website and select vuex as the 3.x version [this project is developed based on vue2]
Vuex is a state management pattern + library for Vue.js applications . It acts as a centralized store for all components in the application.
4. Introduce vuex into the project [Note: Make sure the version is correct! You can open the npm official website to determine the version number of vuex] Open the vscode terminal and enter the following command in the specified directory:
npm i [email protected]The installation is complete
Create a new store folder under the src folder and create an index.js file with the following code:
/* eslint-disable no-unused-vars */
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
//将vuex进行全局部署
Vue.use(Vuex)
//创建vuex的示例
//引入tab后，将该实例对外暴露
export default new Vuex.Store({
modules: {
}
})
//注意，该部分内容最终要由main.js挂载到vue实例上Since the left menu is a separate part of data, and the top bar is also, so according to the idea of modularization, the two parts of data need to be packaged and managed, and a new tab.js file needs to be created under the store folder.
According to the introduction of [Complete Project Construction] ④ and ⑥, the collapse of the menu on the left navigation bar is realized by operating isCollapse
Now you need to click the icon icon in the CommonHeader component to realize the collapse function of the left menu navigation bar, you need to set the control menu in the tab.js in the store to collapse the expanded isCollapse field, and set it in the CommonAside. For reference, the code of the above tab.js file is as follows:
export default {
state: {
//在CommonAside通过操控collapse属性实现左侧菜单导航栏的收起和展开
//isCollapse是collapse属性的属性值
isCollapse: false
},
mutations: {
//修改菜单展开收起的方法
collapseMenu(state) {
state.isCollapse = !state.isCollapse;
}
}
}
After the tab.js file is written, reference it in the index.js file under the store folder
/* eslint-disable no-unused-vars */
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab.js'
//将vuex进行全局部署
Vue.use(Vuex)
//创建vuex的示例
//引入tab后，将该实例对外暴露
export default new Vuex.Store({
modules: {
tab
}
})
//注意，该部分内容最终要由main.js挂载到vue实例上
After exposing the vuex instance to the outside world, it needs to be mounted in the main.js file
import Vue from 'vue'
import App from './App.vue'
//全局引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入iconfont字体图标
import "./assets/font/iconfont.css"
//引入router
import router from './router'
//引入store
import store from './store'
//对element ui进行全局注册
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
Define the click event handleMenu in the corresponding part of CommonHeader.vue
Define this method in methods, use vuex's own commit method to call the method defined under the store folder
Get the state in the store in the CommonAside.vue component to get the isCollapse field
Use it in the template section
At this point, click the icon icon to realize the collapse function of the left navigation bar
Solution: The top bar automatically fills the entire top when the left menu navigation bar is collapsed, and the width of el-aside is set to auto
Solution: Only the words in the left menu navigation bar change when searching. Note that el-menu cannot be set to a fixed width
