这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动，不会介绍Vue的基础特性，关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue，我是看这个入门的，觉得还不错。
代码地址： https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes
上一篇笔记我们记录了怎么实现左侧的公共菜单栏，这一篇讲一下怎么使用公共头部。
在src/components/目录下新建一个叫做CommonHeader.vue文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
| <template>
<el-header>
<div class="l-content">
<el-button size="small" plain>
<el-icon :size="20">
<Menu />
</el-icon>
</el-button>
</div>
<div class="r-content">
<el-dropdown>
<span class="el-dropdown-link">
<img class="user" :src="getImgSrc()" alt="头像" />
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>我的</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
</template>
<script>
export default {
setup() {
let getImgSrc = () => {
return new URL("../assets/images/user.png", import.meta.url).href;
};
return {
getImgSrc,
}
}
}
</script>
<style lang="less" scoped>
header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background: #333;
}
.l-content {
display: flex;
align-items: center;
.el-button {
margin-right: 16px;
margin-left: 10px;
}
h3 {
color: #fff;
}
}
.r-content {
.user {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
}
</style>
```
代码的整体逻辑是很简单的，解释其中两个地方。
首先是el-icon， 这个是Element Plus中的图标组件，详细内容可以参考[图标](https://element-plus.gitee.io/zh-CN/component/icon.html#%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8-svg-%E5%9B%BE%E6%A0%87)， 想要解释的是，ElementPlus跟ElementUI在图标的引用上不一样，ElementPlus需要额外安装和注册，具体的步骤可以看前面官方的链接。
还有一个要解释的是getImgSrc这个函数，这个函数的功能其实很简单，就是获取本地的头像文件，这里跟Vue2中有很大的的区别，可以参考[https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url](https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url)。
代码中引用了一个头像，我们现在上传一下，在src/assets/路径下创建一个images目录，在images目录中上传我们的头像文件，大家可以参考代码仓库。
# 在Main.vue中引用CommonHeader.vue
上面我们已经创建好了主页头部的内容和样式，但是我们还没有使用它，现在来使用它。
前面我们提到过，src/views/Main.vue这个文件是我们所有页面共用的一个框架，它的作用的是把整个页面划分为左侧菜单栏，头部和主体展示三个区域，我们现在就为Main.vue添加CommonHeader。
修改之后的代码内容如下：
```html
<template>
<div class="common-layout">
<el-container>
<el-aside width="180px">
<common-aside></common-aside>
</el-aside>
<el-container>
<el-header>
<common-header></common-header>
</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import CommonAside from "../components/CommonAside.vue";
import CommonHeader from "../components/CommonHeader.vue";
export default {
components: {
CommonAside,
CommonHeader,
}
}
</script>
<style lang="less" scoped>
.common-layout {
height: 100%;
&>.el-container {
height: 100%;
&>.el-aside {
height: 100%;
background: #545c64;
}
&>.el-container {
&>.el-header {
padding: 0%;
}
}
}
}
</style>
|
修改的部分其实很少，在script中引用CommonHeader组件，然后在template中使用就可以。
到这里CommonHeader就实现好了，可以运行项目看一下效果了。
写前端最开心的就是这个时候了，运行之后就能看到实际的效果，但是写后端的时候，如果别人不知道你在干什么，他们其实完全不能理解你的工作，甚至有的时候领导也是这样的。