app.vue
app.vue 文件是您的 Nuxt 应用的主要组件。
如果您有一个
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>