Skip to content

视图

app.vue

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

app.vue
vue
<template>
  <div>
   <h1>欢迎来到主页</h1>
  </div>
</template>

main.js

如果您熟悉 Vue,可能会好奇 main.js 在哪里。Nuxt 会在幕后自动处理这部分内容。

组件

大多数组件是用户界面中可复用的部分,如按钮和菜单。在 Nuxt 中,您可以在 components/ 目录创建这些组件,它们会自动在应用中注册,无需显式导入。

页面

pages/目录中的每个文件都对应一个不同的路由,并展示其内容。

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

布局

layouts/目录下对应于应用的布局

默认使用 layouts/default.vue 文件。

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