已用组件

• NuxtLink：用于路由导航，基于 Vue-router 的 RouterLink 进行的二次封装
• NuxtPage：相当于路由的出口，基于 Vue-Router 的 RouterView 进行的二次封装，渲染 pages 目录下的视图
• NuxtLayout：渲染布局组件，默认渲染 layouts 目录下的 default.vue 组件，该组件内部需要提供一个插槽，用于渲染 app.vue 组件
• NuxtErrorBoundary：错误边界组件，用于包裹可能出错的组件，避免整个组件树都崩溃。
• ClientOnly：被包裹的内容只在客户端渲染
• NuxtIsland：岛屿组件，在服务器端渲染，之后在客户端不会做水合操作。注意这个组件目前是实验性质。

NuxtLoadingIndicator

这是一个加载条组件。当进行页面切换的时候，会提供一个加载条，支持的 props 有：

• color：设置颜色，设置为 false 则是关闭颜色显示样式
• errorColor：当 error 为 true 时加载条的颜色
• height：设置加载条的高度，默认为 3
• duration：加载时常，默认为 2000ms
• throttle：加载条出现和隐藏的时常，默认为 200ms

该组件一般放在和 NuxtPage 组件同级。

图像组件

Nuxt 官方提供了两个和图像相关的内置组件：<NuxtImg> 和 <NuxtPicture>

使用之前需要先安装对应的模块：

npx nuxi@latest module add image

<NuxtImg> 的底层是 <img> 标签，相当于是基于 <img> 标签的二次封装，在原本的 <img> 标签的基础上增加了一些新的特性:

• 自动懒加载: 默认 loading=“lazy”，减少首屏加载时间，原生 <img> 需要手动设置：

  <!-- 原生 img -->
  <img src="/images/example.jpg" alt="示例图片" loading="lazy" />

• 自动格式转换：可以自动将 jpg/png 转换成更适合的网络格式( webp/avif )，提高加载速度。例如下面的例子，如果浏览器支持 webp，Nuxt 会自动返回 webp 格式。如果浏览器不支持 webp 格式，Nuxt 仍然会加载 jpg 版本。

  <NuxtImg src="/images/example.jpg" format="webp" />

• 自动响应式尺寸：根据设备大小，自动生成不同尺寸，避免加载过大的图片

  <NuxtImg src="/images/example.jpg" sizes="sm:300px md:600px lg:900px" />

另外一个 <NuxtPicture> 的底层是 <picture> 标签，同样也是在 <picture> 原生标签的基础上提供了上述的新特性。

其他组件

• <NuxtWelcome>：Nuxt 的欢迎组件，基本不会用到
• <NuxtRouteAnnouncer>：内置的无障碍辅助组件，主要用于在页面路由切换时向屏幕阅读器用户播报页面标题变化，帮助视障用户感知页面内容的动态更新。

-EOF-