现在的前端开发，都离不开组件的开发，组件开发的质量也代表着一个前端人员的开发水平。本节我们就看一下 Nuxt3 中的组件编写。
Nuxt3 中创建一个组件
Nuxt3 的所有自定义组件，必须写在 components 目录下，写在这个目录下他会自动加载到页面中，而不用我们自己不断的重复引入到每个页面中。
比如现在要创建一个<TheFooter/> 的组件，我们在项目跟目录建立一个文件夹 components，然后建立一个文件 TheFooter.vue。
//目录结构 -|components ----|TheFooter.vue
然后在 vscode 中打开文件，编写下面的代码：
<template> <h1>The Footer Box</h1> </template>
这段代码只有一个<h1> 标签，在页面中显示出了 The Footer Box 。写好组件后，你可以到任何的页面（page）中进行使用。比如在首页使用他们。 打开/pages/Index.vue页面，然后在最下面加入这个组件。
<template>
<NuxtLayout name="default">
<template #one>
<div >
<h1>Index Page</h1>
<NuxtLink to="/demo1">Demo1.vue</NuxtLink> <br />
<NuxtLink to="/goods-mybj/demo2-38">Demo2.vue</NuxtLink><br />
<NuxtLink to="/parent/child">/parent/child</NuxtLink><br />
<NuxtLink to="/parent/two">/parent/two</NuxtLink><br />
</div>
</template>
<template #two>
<div>我是 two 中的内容</div>
<TheFooter />
</template>
</NuxtLayout>
</template>
<script setup>
import {} from "vue";
</script>
<style scoped></style>
这时候你到浏览器中就可以看到我们刚写的<TheFooter/>组件起作用了。
在布局模板中使用组件
底部，其实是每个页面都需要包括的组件，拿我们可以直接把这个组件放到`布局模板`里是非常合适的选择。在布局模板中使用组件和在普通页面中使用组件没有太大的差别，直接使用就可以了。
这里我们就在layoutsdefault.vue布局模板中使用。
<template>
<div>
我是布局模板，default.vue
<slot name="one" />
---------<br />
<slot name="two" />
<TheFooter />
</div>
</template>
这时候每个使用了 default.vue 这个布局模板的页面就会有<TheFooter />这个组件的存在了。
组件名称的约定
我说了很多会了 Nuxt3 是约定大于配置的开发模式，所以我们要了解 Nuxt3 框架对于组件名字的约定。比如按照以前的经验，这个<TheFooter/>组件，习惯写成 <the-footer /> 我们测试一下，如果你这样写在页面里也是生效的。
/layouts/default.vue
<template>
<div>
我是布局模板，default.vue
<slot name="one" />
---------<br />
<slot name="two" />
<TheFooter />
<the-footer />
</div>
</template>
但是个人建议，你尽量使用大写，因为这样可以区分那些是自定义组件，那些是原生的 HTML 标签。
我说了这是个人建议，但不是必须的。你也可以编写一个 the-header.vue 的组件，然后用 <the-header/> 的形式使用这个组件也是完全可以的。例如下面的两端代码。 在/components文件夹下面，新建一个页面 the-header.vue
<template> <h1>The Header Box</h1> </template>
然后回到 layouts 文件夹下的 defalut.vue 下使用。
<template>
<div>
<the-header />
我是布局模板，default.vue
<slot name="one" />
---------<br />
<slot name="two" />
<TheFooter />
<the-footer />
</div>
</template>
也是完全可以使用的。由此看来 Nuxt3 对于组件的使用还是非常方便的，你只要符合自己的习惯就好。
结语
本文主要简单学习了 Nuxt3 中组件的创建和使用方法。从学习中可以知道 Nuxt3 的组件使用非常方便，不用重复的不断引入，可以使用在页面中，也可以使用在布局模板中。而且对于书写的名字也有很宽泛的随意性。