[TOC]
头部分为左侧导航以及右侧⽤户菜单。

⾸先，将头部封装为 AppHeader 组件，保存到 layout/components/ 中。

// layout/components/AppHeader.vue

在 layout 中引⼊AppHeader 组件

// layout/index.vue

左侧

左侧导航使⽤ Element 的 ⾯包屑导航 设置。

// AppHeader.vue

修改 header 背景⾊（避免箭头颜⾊与背景相同看不⻅）。

// layout/index.vue .el-header { background-color:#fff; // 修改颜⾊ }

设置头部内容垂直居中。

// app-header.vue

右侧

右侧使⽤ Element 的 下拉菜单 设置。 // AppHeader.vue

设置左右显示。

将下拉菜单⽂字更改为 Element 的 Avatar 组件。

class=“el-dropdown-link”> :size=“30” src=“https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c672 6f1epng.png” > class=“el-icon-arrow-down el-icon—right”>

设置头像与右侧箭头垂直居中

// AppHeader.vue

最后修改下拉菜单内容与结构，divided 属性⽤于设置分割线

slot=“dropdown”> ⽤户信息 divided>退出