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

前言

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

需求拆分

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

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

Layouts 布局

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

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

1
2
3
4
5

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

pnpm add @nuxt/image nuxt-icons -D
1

nuxt.config.ts 文件中启用：

modules: ['@nuxt/image', 'nuxt-icons'],
1

3. 新建 components/AppColorMode.vue 白天暗黑模式切换组件：

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4. 新建 components/UColorModeSVG.vue 组件，SVG 跟随白天暗黑模式：

 

 

 
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

5. 新建 components/AppHeader 头部组件：

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6. 新建 layouts/default.vue 默认布局组件：

1
2
3
4
5
6

最终效果

1. PC端
   
   

2. 移动端
   
   

总结

目前实现的效果比较简单，先把基本布局和功能实现，后期再具体调整。

好了，今天就到这吧！

Github 仓库：dream-site

线上预览：dream-site.cn