Vue3 Getting Started Notes 4 ---- Implementing the Common Header Style

This series of notes will mainly focus on how to set up a project using Vue3 and interact with backend APIs. It won’t cover the basic features of Vue. For the basic features of Vue, you can refer to this video Get a Quick Start with Vue in Four Hours. I got started with Vue by watching this video and thought it was pretty good.

Code address: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

In the previous note, we recorded how to implement the common menu bar on the left. This note will talk about how to use the common header.

Creating the CommonHeader.vue Component

Create a new file named CommonHeader.vue in the src/components/ directory. The content is as follows:

<template>
    <el-header>
        <div class="l-content">
            <!-- This button was supposed to have a purpose, but it's not relevant to the main content of this note, so it's removed, leaving only the style -->
            <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="Avatar" />
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>My</el-dropdown-item>
                        <el-dropdown-item>Logout</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>


<script>
export default {
    setup() {
        let getImgSrc = () => {
            // Refer to 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>
```  
The overall logic of the code is quite simple. Let's explain two parts of it.  

First, el-icon. This is an icon component in Element Plus. For detailed information, you can refer to [Icons](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). What needs to be explained is that the way of referencing icons in ElementPlus is different from that in ElementUI. ElementPlus requires additional installation and registration. You can refer to the official link above for the specific steps.  

Another part to explain is the getImgSrc function. The function of this function is actually very simple, which is to obtain the local avatar file. There is a big difference here compared with Vue2. You can refer to [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).  

An avatar is referenced in the code. Now let's upload it. Create an images directory in the src/assets/ path and upload our avatar file in the images directory. You can refer to the code repository.  

# Referencing CommonHeader.vue in Main.vue
We have created the content and style of the homepage header above, but we haven't used it yet. Now let's use it.  

As mentioned before, the src/views/Main.vue file is a framework shared by all our pages. Its function is to divide the entire page into three areas: the left menu bar, the header, and the main display area. Now we will add CommonHeader to Main.vue. 

The modified code content is as follows: 
```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>

The modified part is actually very small. Just reference the CommonHeader component in the script and then use it in the template.

Up to this point, the CommonHeader has been implemented. You can run the project to see the effect.

This is the most exciting time when writing front - end code. You can see the actual effect after running. But when writing back - end code, if others don’t know what you’re doing, they actually can’t understand your work at all. Sometimes even leaders are like this.