nuxt组件自动导入

在 Nuxt 中，“组件自动导入 (Components Auto-import)” 是提升开发爽感的核心特性之一。它让你告别了在每个页面顶部写一堆 import MyComponent from '...' 的痛苦。

默认规则

只要你在app/components/文件夹中创建.vue文件，Nuxt 就会自动扫描并生成类型提示，你在任何页面或布局中都可以直接使用。

文件结构

app/
  components/
    AppHeader.vue
    User/
      Avatar.vue
  pages/
    index.vue

**命名约定：**Nuxt 会根据目录层级自动命名。components/User/Avatar.vue自动变为<UserAvatar />。如果你不喜欢这种拼接，也可以直接在components/下扁平化存放。

文件名尽量遵循大写命名法约定

开发的时候尽量避免文件目录和文件重名的情况，比如UserAvatar.vue和User/Avatar.vue

在index.vue中直接使用：

<template>
  <div>
    <AppHeader /> 
    
    <UserAvatar />
  </div>
</template>

懒加载组件

这是优化网站性能的利器。如果你有一个组件（比如“评论弹窗”或“感谢信”）不是页面一加载就需要的，你可以通过在组件名前加 Lazy 前缀来激活懒加载。

<template>
  <div>
    <h1>文章标题</h1>
    <LazyArticleCommentBox v-if="showComment" />
    <button @click="showComment = true">查看评论</button>
  </div>
</template>

<script setup>
const showComment = ref(false)
</script>

这对于SEO非常有帮助：它减小了初始 HTML 的 JS 体积，让搜索引擎和用户的首屏加载速度更快。

ClientOnly 组件

有些第三方组件（比如富文本编辑器、图表库）可能不支持服务器端渲染（因为它们依赖浏览器的window或document 对象）。

如果你直接在 Nuxt 中使用它们，服务器可能会报错。这时需要包裹在<ClientOnly> 中：

<template>
  <div>
    <ClientOnly>
      <VisualChart />
      
      <template #fallback>
        <p>图表加载中...</p>
      </template>
    </ClientOnly>
  </div>
</template>

显式导入

虽然自动导入很香，但如果你需要动态组件（例如使用<component :is="...">），你还是需要手动导入，或者使用 Nuxt 提供的resolveComponent辅助函数。

<script setup lang="ts">
import Avatar from "~/components/Avatar.vue";

</script>

<template>
  <component :is="Avatar"></component>
</template>

或者

<script setup>
// 如果需要动态切换
const MyIcon = resolveComponent('IconHome')
</script>

<template>
  <component :is="MyIcon" />
</template>