视图

Nuxt提供了几个组件层，用于实现您应用程序的用户界面。

app.vue

默认情况下，Nuxt将把这个文件视为入口点，并在应用程序的每个路由上渲染其内容。换句话说，这个文件的内容将作为默认的页面布局，在每个路由上都会被呈现。

<!-- app.vue -->
<template>
  <div>
   <h1>Welcome to the homepage</h1>
  </div>
</template>

如果您熟悉Vue，您可能会想知道Nuxt中的main.js文件（通常用于创建Vue应用程序）在哪里。Nuxt在幕后完成了这个工作。换句话说，Nuxt自动处理了创建Vue应用程序的过程，您无需手动编写main.js文件。这是Nuxt框架的一个特性，它为您处理了Vue应用程序的初始化和配置。

组件

大多数组件都是用户界面中可重用的部分，比如按钮和菜单。在Nuxt中，您可以在components/目录下创建这些组件，它们将自动在整个应用程序中可用，无需显式导入它们。这意味着您可以在应用程序的任何地方使用这些组件，而无需在每个文件中单独导入它们。这种自动全局可用性使得组件的使用和管理更加方便。

<!-- app.vue -->
<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component.
    </AppAlert>
  </div>
</template>

<!-- components/AppAlert.vue -->
<template>
  <span>
    <slot />
  </span>
</template>

页面

在Nuxt中，页面（Pages）代表了每个特定路由规则的视图。在pages/目录中的每个文件都代表一个不同的路由规则要显示其内容。

要使用页面，您可以创建一个pages/index.vue文件，并在app.vue中添加<NuxtPage />组件（或者删除app.vue以使用默认入口）。现在，您可以通过在pages/目录中添加新文件来创建更多页面和相应的路由。

通过这种方式，您可以轻松地为不同的路由规则创建页面，并在应用程序中使用它们。每个页面都可以包含自己的内容和逻辑，以实现特定路由的功能和显示要求。

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>

<!-- pages/about.vue -->
<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

在Routing部分，您可以更详细地了解有关页面的内容

布局

布局（Layouts）是页面的包装器，用于为多个页面提供共同的用户界面，例如页眉和页脚显示。在Vue文件中，布局使用<slot />组件来显示页面的内容。默认情况下，将使用layouts/default.vue文件作为默认布局。可以通过设置页面的元数据来进行自定义布局。

如果您的应用程序只有一个布局，我们建议使用app.vue文件，并使用<NuxtPage />组件代替。在这种情况下，您可以将app.vue看作是整个应用程序的主要布局模板。

<!-- layouts/default.vue -->
<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>

<!-- pages/about.vue -->
<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

如果您想创建更多布局并学习如何在页面中使用它们，请在"Layouts"部分中查找更多信息。