一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

Nuxt3-学习之路 09， 组件-自动导入

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的 乱七八糟 的 知识点。

组件

Nuxt3 的组件与我们写一个 Vue 组件类似，但是 Nuxt3 有一个很大的特点。

我们不需要进行 import 来进行导入，而是 Nuxt3 的自动导入。

自动导入

Nuxt3 组件的自动导入，也是约定好是在与 app.vue 同级的目录下，新建一个名为 components 的文件夹。目录结构如下。

-| components/
---| TheHeader.vue
---| TheFooter.vue
-| app.vue

我们创建好相关文件夹后，先将其在 根路由 中直接使用。

根据结果，我们可以看到组件是成功渲染的。但是值得注意的是，它并没有通过 import 来进行引入的，而是 Nuxt3 会直接搜寻 components 文件夹下的文件，将文件名作为组件名，来自动引入我们的组件。

相对应的，如果我们不将文件放置在 components 文件夹下，则是不会自动导入的。

这里有两个注意点

• 如果是像这种大写，它是有好几种写法，以 TheHeader.vue 为例子:

  • TheHeader
  • the-header
  • The-header
  • the-Header

• 如果创建一个特殊的文件，就会发生神奇的效果。

  这里继续在 components 文件夹下 创建一个 the-header.vue 文件，里面的内容为

  

  

  且 default.vue 文件保持不动。

  

  那么请猜猜页面是如何显示的！

  

  所以这里请注意，命名一定要有规范，防止 bug。

组件内使用组件

既然可以在 根路由 进行引入，那么我们尝试在组件中引入其它组件，查看是否可以引入，新建一个 MyComp.vue 的一个文件，目录结构：

将这个组件引入到 TheHeader.vue 组件中，可以看到是成功的显示。

说明，这个组件的适用范围是全部文件都可以（非自身文件哦！）。

总结

学习了 Nuxt3 的组件-自动导入部分，可以看到很方便的进行引入，而且也讨论了特殊情况的发生，需要多加注意，保持文件的格式统一。