nuxt常用组件

除了nuxt-page，nuxt-layout，NuxtLink内置组件之外，还有很多好用的内置组件

NuxtLoadingIndicator进度条组件

<template>
  <div>
    <NuxtLoadingIndicator color="#348feb" :height="3" />
    <nuxt-layout>
      <nuxt-page></nuxt-page>
    </nuxt-layout>
  </div>
</template>

可以在路由切换的时候，在顶部显示进度条

NuxtLink组件

前面讲布局的时候用过它了，它和vue的router-link有啥区别？

如果你之前写过 Vue SPA，肯定对RouterLink很熟悉。在 Nuxt 中，我们几乎永远只用<NuxtLink>。

特性	RouterLink (Vue Router)	NuxtLink (Nuxt 4)
基础功能	实现应用内跳转，不刷新页面。	包含所有 RouterLink 功能，并做了增强。
智能预取 (Prefetching)	默认不开启。	核心卖点：当链接进入视图窗口时，Nuxt 会自动预加载该页面的 JS 资源。
外部链接处理	不支持直接跳转外部（需用`<a>`）。	全能：自动识别。如果是`http`开头，自动转为`<a>` 并处理安全属性。
加载状态响应	无。	支持`activeClass`且能配合`pending` 状态做加载动画。

NuxtImg（图片优化组件）

npx nuxt module add @nuxt/image
# 或者
npm install @nuxt/image  
# 下面这种需要在nuxt.config.ts中启用

虽然它属于@nuxt/image 模块（通常需要额外安装），但它几乎是 Nuxt 开发的标配。它能自动实现：

响应式尺寸： 根据设备自动调整图片大小。
格式转换：自动把 PNG/JPG 转成更小的WebP。
**懒加载：**自动开启loading="lazy"。

NuxtImg会自动处理本地的图片，比如格式转换，响应式尺寸，图片质量

如果是远程的图片，需要配置domains参数

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    domains: ['pic.rmb.bdstatic.com'] // 必须授权，IPX 才会介入处理
  }
})

基础布局参数

这些参数控制图片在页面上的“长相”和基本属性。

src: 图片路径。可以是public/ 下的本地路径，也可以是远程 URL。
width/height: 设置图片的显示尺寸。
- *提示：*设置宽高可以防止累积布局偏移 (CLS)，让 SEO 分数更高。
alt: 图片描述。SEO 必填项，方便搜索引擎理解图片内容。
sizes: 响应式尺寸。
- 例如：sizes="sm:100vw md:50vw lg:400px"。意为：手机端全屏宽，平板端半屏宽，电脑端固定 400px。

转换与优化参数

这些参数决定了图片在传输过程中的“体积”。

format: 强制转换格式。
- 可选值：webp,avif,png,jpg等。强烈建议设为**webp**。
quality: 图片质量（1-100）。
- 默认通常是 80，这在肉眼无损的情况下能极大地压缩体积。
fit: 缩放模式。
- 当给定的宽高比例与原图不符时，控制如何裁剪。常用：cover（铺满）,contain（缩放以完整显示）。

加载策略参数

这部分直接关系到用户体验和加载性能。

loading: 加载方式。
- lazy(默认): 进入视口再加载。
- eager: 立即加载。用于首屏大图。
preload: 布尔值。
- 设为true 会在 HTML 头部插入预加载指令，适合文章首图。
placeholder: 布尔值或路径。
- 设为true 会自动生成一个极小的模糊预览图。
nonce: 用于内容安全策略（CSP）。

学会用这些参数，你就相当于拥有了一个全自动的 UI 缩略图服务，再也不需要手动用 PS 去压缩图片了。