Nuxt3 实战 (五)：Header 头部布局

前言

这两周一直忙公司系统的迭代需求，没啥时间捣鼓自己的小项目，趁着项目进入测试收尾阶段，抽空把 Layout 布局的 Header 部分先搞好。

需求拆分

1. 顶部左侧放 Logo，右边放社交图标，暗黑模式切换
2. 提前准备好 Logo 和网站 favicon.ico 图标
3. 布局组件拆分

先简单这样布局，后期会考虑加一个 搜索输入框。

Layouts 布局

Nuxt 提供了一个布局框架，用于将常见的 UI 模式提取为可重用的布局。

1. 在 app.vue 中添加 <NuxtLayout>，可以启用布局：

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

2. 安装 @nuxt/image 和 nuxt-icons

pnp