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

Nuxt3-学习之路 08， 布局-自定义布局

引言

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

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

布局

Nuxt3 的 布局 就 相当于 带有插槽的组件。

• 我们一个文件中，引入一个组件，然后通过插槽的形式，往里面放置内容。

布局 的位置，是在 layouts 文件夹。目录结构为：

-| layouts/
-| app.vue

自定义布局

自定义布局 与 默认布局 类似， 也是需要在 layouts 文件夹下，创建自己所需的组件名字。这里我创建一个名为 custom 的 custom.vue 的文件。

-| layouts/
---| custom.vue
-| app.vue

我们定义好了之后，重启项目，可以在页面中看到我们的自定义布局 已经在页面上了。

可以看到自定义布局 与 默认布局，极其的一样。对的，我在学习后也发现确实是一样的。

奇思妙想

那么既然是类似一样的，就不多讲了。

这里就再研究下 奇思妙想

• 是否可以在 layout 文件夹下，创建一个新的文件夹，这个文件夹中创建自定义布局文件。

  目录结构如下：

  -| layouts/
  ---| test1/
  -----| test1.vue
  -| app.vue
  

  

  

  

  可以看到是找不到 name 为 test1 这个布局组件，而且是没有报错的。但是里面的内容为什么会显示呢？

  我们可以在生成的* server.mjs* 文件中看到，没有生成相关的布局。

  

  证明 layout 里面创建文件夹，这样是行不通的。

总结

学习了 Nuxt3 的布局 - 自定义布局 的使用 和 测试了特殊情况下，是不能生成自定义布局组件的，因为没有引用。