这个系列的笔记重点会放在怎么样利用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>
代码的整体逻辑是很简单的,解释其中两个地方。
首先是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>
修改的部分其实很少,在script中引用CommonHeader组件,然后在template中使用就可以。
到这里CommonHeader就实现好了,可以运行项目看一下效果了。
写前端最开心的就是这个时候了,运行之后就能看到实际的效果,但是写后端的时候,如果别人不知道你在干什么,他们其实完全不能理解你的工作,甚至有的时候领导也是这样的。