一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
Nuxt3-学习之路 10， 组件-嵌套目录
引言
本系列会以我的一个理解，来介绍并开始学习 Nuxt3。
中间会插入自己所联系到的 乱七八糟 的 知识点。
组件
Nuxt3 的组件概念与 Vue 的组件概念类似，但是 Nuxt3 有一个很大的特点，就是自动导入。
嵌套目录
嵌套目录，可以理解为，在组件目录 components 文件夹下，新建一个文件夹，在新的文件夹里还可以放置文件或者文件夹。
那么我们写个例子，来理解一下嵌套目录是什么。这里先把文件夹创建好。
| components/
--| base/
----| foo/
------| Button.vue
----| Fwo
------| Input.vue
分别在这两个文件写入不同的内容，进行区分。
然后分别在 default.vue 页面中，进行引入，查看是否是我们想要的结果。
可以看到我写了两种写法，均可以成的将组件在页面上显示。
此时我们的 嵌套目录 也学习完毕，下面补充一些特殊情况。
补充
关于 Button 这个组件，此时可能会有特殊的24种引入的写法，但是只有16种是可以使用的。这里使用的时候注意下。
| 组件名 | 成功 | 失败 |
|---|---|---|
| base-foo-button | ✔️ | |
| base-foo-Button | ✔️ | |
| base-Foo-button | ✔️ | |
| base-Foo-Button | ✔️ | |
| Base-foo-button | ✔️ | |
| Base-foo-Button | ✔️ | |
| Base-Foo-button | ✔️ | |
| Base-Foo-Button | ✔️ |
| 组件名 | 成功 | 失败 |
|---|---|---|
| basefoobutton | ❌ | |
| basefooButton | ❌ | |
| baseFoobutton | ❌ | |
| baseFooButton | ✔️ | |
| Basefoobutton | ❌ | |
| BasefooButton | ❌ | |
| BaseFoobutton | ❌ | |
| BaseFooButton | ✔️ |
| 组件名 | 成功 | 失败 |
|---|---|---|
| baseFoo-button | ✔️ | |
| baseFoo-Button | ✔️ | |
| BaseFoo-button | ✔️ | |
| BaseFoo-Button | ✔️ | |
| base-Foobutton | ❌ | |
| base-FooButton | ✔️ | |
| Base-Foobutton | ❌ | |
| Base-FooButton | ✔️ |
通过上面的情况，那么请猜一下，关于 Input 这个组件，此时会有几种引入的方法是成功的。
是的，结果与上面一样，也是只有这16种方式。
总结
学习了 Nuxt3 的组件-嵌套目录，可以知道在嵌套的文件夹下，如何命名，以及注意特殊的命名方式。
