Nuxt

视图

app.vue

默认情况下，Nuxt 会将此文件视为 入口点 (entrypoint) 并在应用的每个路由中渲染其内容

<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>

组件

大多数组件是 UI 的可重用部分，例如按钮和菜单。在 Nuxt 中，您可以在 app/components/ 目录中创建这些组件，它们将在您的应用中自动可用，无需显式导入。

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

页面

页面代表每个特定路由模式的视图。 app/pages/ 目录中的每个文件代表一个不同的路由，显示其内容。

要使用页面，请创建一个 app/pages/index.vue 文件，并将 <NuxtPage /> 组件添加到 app/app.vue (或移除 app/app.vue 以使用默认入口)。现在，您可以通过在 app/pages/ 目录中添加新文件来创建更多页面及其对应的路由。

布局

布局是页面的包装器，包含多个页面共享的通用 UI，例如页眉和页脚的显示。布局是使用 <slot /> 组件来显示 页面 内容的 Vue 文件。默认情况下，将使用 app/layouts/default.vue 文件。 可以在页面元数据中设置自定义布局

如果您的应用只有一个布局，我们建议使用 app/app.vue 配合 <NuxtPage /> 代替。

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

资源

公共目录

public/ 目录用作公共服务器，用于提供应用程序在特定 URL 下可公开访问的静态资源。

您可以通过应用程序代码或浏览器通过根 URL / 访问 public/ 目录中的文件。

示例 例如，引用 public/img/ 目录中的图像文件，该文件可通过静态 URL /img/nuxt.png 访问

<template>
  <img
    src="/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>

资源目录

Nuxt 使用Vite（默认）或webpack来构建和打包您的应用程序。这些构建工具的主要功能是处理 JavaScript 文件，但可以通过plugins（对于 Vite）或加载器（对于 webpack）来扩展以处理其他类型的资源，如样式表、字体或 SVG。此步骤会转换原始文件，主要是为了性能或缓存目的（例如样式表最小化或浏览器缓存失效）。

按照惯例，Nuxt 使用 app/assets/ 目录来存储这些文件，但此目录没有自动扫描功能，您可以使用任何其他名称。

在您的应用程序代码中，您可以使用 ~/assets/ 路径来引用位于 app/assets/ 目录中的文件。

<template>
  <img
    src="~/assets/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>

路由

页面

Nuxt 路由基于Vue Router并根据 app/pages/ 目录中创建的每个组件的名称来生成路由。

此文件系统路由使用命名约定来创建动态路由和嵌套路由

目录结构

生成的路由器文件

-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue

导航

组件 <NuxtLink> 用于在页面之间进行链接。它渲染一个带有 href 属性的 <a> 标签，该属性设置为页面的路由。应用程序水合（hydrated）后，页面过渡通过 JavaScript 更新浏览器 URL 来执行。这避免了完全的页面刷新，并允许进行动画过渡。

当 <NuxtLink> 在客户端进入视口时，Nuxt 会自动预取链接页面的组件和有效载荷（生成的页面），从而实现更快的导航。

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

过渡

页面过渡

你可以启用页面过渡，为所有 页面 应用自动过渡效果。

//nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
  },
})

如果你在更改布局的同时也更改页面，此处设置的页面过渡将不会运行。相反，你应该设置一个 布局过渡。 要开始在页面之间添加过渡效果，请将以下 CSS 添加到你的 app.vue

<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

布局过渡

你可以启用布局过渡，为所有 布局 应用自动过渡效果。

//nuxt.config.ts
export default defineNuxtConfig({
  app: {
    layoutTransition: { name: 'layout', mode: 'out-in' },
  },
})

要开始在页面和布局之间添加过渡效果，请将以下 CSS 添加到你的 app.vue

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

<style>
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>

请求

Nuxt 附带了两个 composables 和一个内置库，用于在浏览器或服务器环境中执行数据获取：useFetch、useAsyncData 和 $fetch。

简而言之

$fetch 是发起网络请求的最简单方式。 useFetch 是对 $fetch 的封装，它仅在 通用渲染 中获取数据一次。 useAsyncData 与 useFetch 类似，但提供了更精细的控制。

useFetch 会确保请求发生在服务器上，并被正确转发到浏览器。$fetch 没有这样的机制，当请求仅从浏览器发起时，它是一个更好的选择