Nuxt 3 已于 31 July 2026 结束生命周期
此版本将不再接收错误修复或安全补丁。 升级到 Nuxt 4 或获取 HeroDevs 提供的延长支持
app.vue
app.vue 文件是您的 Nuxt 应用的主要组件。
Maschinelle Übersetzung ·0 % geprüft
如果您有一个
pages/ 目录，app.vue 文件是可选的。Nuxt 会自动包含一个默认的 app.vue，但您仍然可以添加自己的文件来根据需要自定义结构和内容。用法
最简用法
使用 Nuxt 时，pages/ 目录是可选的。如果该目录不存在，Nuxt 将不会包含 vue-router 依赖项。这在构建落地页或不需要路由的应用程序时很有用。
app.vue
<template>
<h1>Hello World!</h1>
</template> Read and edit a live example in Docs > Examples > Hello World.
结合 Pages 使用
当您有一个 pages/ 目录时，需要使用 <NuxtPage> 组件来显示当前页面：
app.vue
<template>
<NuxtPage />
</template>您也可以直接在 app.vue 中定义应用的通用结构。当您想要包含全局元素，如页头或页脚时，这非常有用：
app.vue
<template>
<header>
Header content
</header>
<NuxtPage />
<footer>
Footer content
</footer>
</template>请记住，
app.vue 作为您的 Nuxt 应用的主要组件，您添加到其中的任何内容（JS 和 CSS）都会是全局的，并包含在每个页面中。结合布局使用
当您的应用需要为不同页面使用不同布局时，可以将 layouts/ 目录与 <NuxtLayout> 组件结合使用。这样您就可以定义多个布局，并将其应用于各个页面。
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>