开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

写在前面

上篇文章介绍了如何在vite+vue项目中编写后台页面布局代码，本篇文章介绍如何在vite+vue项目中编写后台页面的头部代码

每个后台管理页面都有一个头部（顶部）栏，用来显示系统名称、用户名称，以及一些消息提示和登出，有些系统还会将用户个人信息和修改密码也放在头部

后台管理的涉及资源网上很多，大家也可以根据自己的喜好选择自己喜欢的设计稿来开发，功能基本就上述几个，改的基本就是页面设计和布局

账号：admin
密码：admin

头部代码说明

我这里就先简单写一个头部，最终的效果如下，左边是系统名称，右边是用户头像+用户名，用户名使用Element Plus的下拉菜单组件，下拉菜单后可以进行查看用户个人信息、修改密码和退出登录的操作，目前只前端实现了退出登录，查看个人信息和修改密码的页面不做，大家可以根据自己的需求自己随便写，下面是我的代码，供大家参考：

代码如下：

<template>
  <div class="header">
    <div class="app_name">后台管理系统</div>
    <div class="header_user">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <el-icon class="user_avatar">
            <Avatar />
          </el-icon>
          {{ userName}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
            <el-dropdown-item command="updatePass">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowDown,Avatar } from '@element-plus/icons-vue'

import { useRouter } from "vue-router";
import { logout } from "@/api/Login";

import { ElMessage } from "element-plus";

const router = useRouter();

const userName = 'admin'

const handleLogout = () => {
  logout().then((res) => {
    router.push({ path: "/login" });
    ElMessage({
      message: '退出成功！',
      type: "success",
    });
  });
};

const handleCommand = (command: string | number | object) => {
  if (command === 'userInfo') {
    console.log('打开个人信息页面')
  } else if (command === 'updatePass') {
    console.log('打开修改密码页面')
  } else if (command === 'logout') {
    handleLogout()
  }
}
</script>

<style lang="less" scoped>
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  font-size: 18px;
  color: #fff;
  background-color: #057de3;

  .app_name {
    float: left;
    line-height: 50px;
    font-size: 18px;
    padding: 0 21px;
  }

  .header_user {
    float: right;
    padding-right: 40px;

    .user_avatar {
      font-size: 18px;
      top: 2px;
      margin-right: 5px;
    }

    .el-dropdown {
      line-height: 50px;
      color: #fff;
    }
  }
}
</style>

写在最后

以上就是在vite+vue项目中编写后台页面的头部的所有代码和说明

vite+vue项目之后台页面的头部代码编写

写在前面

头部代码说明

写在最后