Nuxt3的布局系统使用（不完整，更新中）

我们在使用nuxt3的过程中会发现，nuxt3并不像nuxt2中给你创建了整个项目的模板。只有一些简单的文件内容结构。

 在使用布局系统前，我们要通过 npm i  先将项目初始化：

1.在根目录下创建pages文件夹（页面文件夹），创建一个index.vue文件。

2.在根目录下创建layouts文件夹（布局文件夹），创建一个default.vue文件。default是默认布局的意思。

 

 3.我们使用布局系统前需要在app.vue中写好如下代码。

<template>
  <div>
    <!-- 添加布局系统模板 -->
    <NuxtLayout>
      <!-- 页面的主要内容在布局系统中添加。 -->
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

 4.最后一步，在我们默认布局default.vue这样写,最后启动就可以了。

<template>
    <div>
        <h1>默认布局页面</h1>
        <!-- solt展示的是pages中的所有内容 -->
        <slot />
    </div>
</template>

<NuxtLayout>就是使用布局模式的意思，如果不添加此行代码，启动后加载的页面就是pages中的index.vue页面。

使用后：布局系统内容就是NuxtLayout  =   default默认布局 + solt 中page的内容。