文件目录

Nuxt3 提供了几个组件层来实现应用程序的用户界面

app.vue

默认情况下 Nuxt3 会使用 app.vue 作为应用程序的根组件也就是入口点,并为应用程序的每个路由渲染其内容

vue

<template>
  <div>
    <h1>欢迎来到首页</h1>
  </div>
</template>

如果你熟悉 Vue 你可能会联想到main.jsNuxt 在幕后完成了这个具体操作

组件是可重复使用的

组件必须写在components/目录中创建这些组件即可在整个应用程序中使用,无需显示导入

vue

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <AppAlert> 这是一个自动导入的组件。 </AppAlert>
  </div>
</template>

页面是特定路由相关的视图

页面代表了每个特定路由模式的试图

pages/目录中的每个文件都表示一个不同的路由/显示其内容

要使用页面,创建 pages/index.vue文件并且将<NuxtPage/>组件添加到app.vue

vue

<!--app.vue-->
<template>
  <div>
    <NuxtPage />
  </div>
</template>

布局是页面的包装器

布局是页面的包装器，包含了多个页面的共同用户界面，如页眉和页脚。布局是使用 <slot /> 组件来显示页面内容的 Vue 文件。 layouts/default.vue 文件将被默认使用。自定义布局可以作为页面元数据的一部分进行设置

INFO

如果你的应用程序只有一个布局，我们建议使用 app.vue 和 <NuxtPage />。

vue

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <slot />
  </div>
</template>

vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>