Vue3入门笔记----实现公共头部样式_vue3 设置公共顶部

这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动，不会介绍Vue的基础特性，关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue，我是看这个入门的，觉得还不错。

代码地址： https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

同步发表于个人站点：http://www.panzhixiang.cn/article/2022/10/29/58.html

上一篇笔记我们记录了怎么实现左侧的公共菜单栏，这一篇讲一下怎么使用公共头部。

创建 CommonHeader.vue 组件

在src/components/目录下新建一个叫做CommonHeader.vue文件，内容如下：

<template>
    <el-header>
        <div class="l-content">
            <!-- 这个button本来应该是有用途的，但是与本笔记主体内容无关，所以去除了，只保留样式 -->
            <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 = () => {
            // 参考https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url
            // console.log(import.meta.url)
            // console.log(new URL("../assets/images/user.png", import.meta.url))
            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>
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

代码的整体逻辑是很简单的，解释其中两个地方。

首先是el-icon， 这个是Element Plus中的图标组件，详细内容可以参考图标， 想要解释的是，ElementPlus跟ElementUI在图标的引用上不一样，ElementPlus需要额外安装和注册，具体的步骤可以看前面官方的链接。

还有一个要解释的是getImgSrc这个函数，这个函数的功能其实很简单，就是获取本地的头像文件，这里跟Vue2中有很大的的区别，可以参考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。

修改之后的代码内容如下：

<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>
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

修改的部分其实很少，在script中引用CommonHeader组件，然后在template中使用就可以。

到这里CommonHeader就实现好了，可以运行项目看一下效果了。

写前端最开心的就是这个时候了，运行之后就能看到实际的效果，但是写后端的时候，如果别人不知道你在干什么，他们其实完全不能理解你的工作，甚至有的时候领导也是这样的。