前言
上一篇写了nuxt3布局系统，通过自定布局页，我们可以提取一些通用UI或代码到可重用的布局组件中，非常便捷。这一篇我们研究一下nuxt的组件系统，我估计大家应该挺烦每次使用组件时的各种导入和注册操作，这点nuxt中早就解决了，组件用就完了，它可以有效提高开发体验！
自动导入组件
我们把Vue组件放在components/目录，这些组件可以被用在页面和其他组件中，以往我们使用这些组件需要导入并注册它们，但Nuxt会自动导入components/目录中的任意组件。比如：
| components/
--| TheHeader.vue
--| TheFooter.vue
layouts/default.vue:
<template>
<div>
<TheHeader />
<slot />
<TheFooter />
</div>
</template>
组件名称约定
没有嵌套的组件会以文件名直接导入，但如果存在嵌套关系哪？例如下面的路径：
| components/
--| base/
----| foo/
------| Button.vue
那么组件名称将会基于路径和文件名连起来，比如上面的base/foo/Button.vue注册名称将会是BaseFooButton，将来用起来会像下面这样：
<BaseFooButton />
组件懒加载
如果在组件名前面加上Lazy前缀，则可以按需懒加载该组件，可用于优化打包尺寸。
比如，下面的用法：
<template>
<div>
<h1>Mountains</h1>
<LazyMountainsList v-if="show" />
<button v-if="!show" @click="show = true">显示列表</button>
</div>
</template>
<script setup>
import {ref} from 'vue'
const show = ref(false)
</script>
