视图
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>
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部分,您可以更详细地了解有关页面的内容
如果您的应用程序只有一个布局,我们建议使用app.vue文件,并使用 Layouts"部分中查找更多信息。<slot />
组件来显示页面的内容。默认情况下,将使用layouts/default.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>