【Nuxt3从入门到实战】第四啪：组件自动导入，用就完了！开发体验杠杠的！

前言

大家好，我是村长，欢迎关注我的B站【Young村长】！为了让喜欢看视频的小伙伴方便学习，我专门录制了系列视频，点击下面链接观看：

Nuxt3入门到实战

上一篇写了​​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>

配套视频

本系列文章有配套视频，感兴趣的小伙伴可以前往观看。

下次预告

前面四篇都是nuxt3架构上解决的一些问题相关，下一篇我们开始演示nuxt3在业务编写方面的功能，比如数据获取、可复用业务逻辑、状态管理等等。