继上一篇文章(nuxt3目录及使用 - 掘金 (juejin.cn))之后，我们继续学习Nuxt的相关使用。
layouts
这次我们先引入一个layouts目录，这个目录是做什么的呢？我们在下面的使用中说清楚。
我们先在根目录下新建一个layouts目录，然后我们在layouts目录下新建一个layout1.vue文件，然后我们开始使用一下神奇的layouts。
内容如下:
<template>
<header>
<h1>
标题
</h1>
</header>
<main>
<slot></slot>
</main>
</template>
<script setup lang="ts"></script>我们先解释一下，首先定义了一个公用的头--标题，然后主要内容可以由后续插入的内容来决定。
我们来实际使用一下:
我们改进一下index.vue中的内容:
<template>
<NuxtLayout name="layout1">首页</NuxtLayout>
</template>
<script setup lang="ts"></script>可见，我们通过了一个Nuxt3中提供的NuxtLayout标签，内部指定了name="layout1",再看看我们layouts目录下的文件名字，同样是layout1.vue，参考我们前面的铺垫，我们使用了Nuxt约定的方式，所以我们无需导入导出，直接就可以通过name属性来指定布局方式，我们运行一下看看效果。
确实如预期所想，我们插入的内容自动的放在了插槽中，而上方还是我们定义好的标题。
有什么用？
在业务逻辑开发中，我们面对大量的不同的页面，页面和页面间有相似布局的部分，也有不相似的布局的部分，所以我们如果使用Nuxt3中的布局，可以预先根据不同页面的布局需求写出大致的步聚骨架部分，然后根据业务页面的不同选择不同name的布局。完成使用。
