1. app.vue
    2. Components (组件目录)
    3. Pages
    4. Layouts(布局)
    5. 参考

在Nuxt3项目中,可以在这些地方写UI界面代码

app.vue

image

默认情况下,app.vue是项目的入口文件,访问应用的每个页面,也都会渲染app.vue的内容。

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

如何你熟悉Vue,你会想main.js去哪了。事际上,Nuxt在应用启动后自动创建了这个文件。

Components (组件目录)

image

大部分组件是可复用的用户界面代码片断,比如按钮和菜单。在Nuxt中,你只要将组件代码放进/omponents目录,你就可以在整个项目中自由使用组件,而无需手动引入。

components/AppAlert.vue

<template>
  <span>
    <slot />
  </span>
</template>

app.vue:

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

无需在app.vue中引用AppAlert,就能够直接使用,非常方便。

Pages

image

/pages目录中的每一个.vue文件,就是一个路由文件。可以直接在这个文件中写界面代码。

比如创建个首页页面:/pages/index.vue

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

Layouts(布局)

image

Layouts是页面外层包装,包含多个页面共用的用户界面,如页头和页脚显示。Layouts本身也是个Vue文件,使用组件显示页面内容。默认情况下将使用布局/layouts/default.vue文件。自定义Layout可以作为页面元数据的一部分进行设置。

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>

参考

本文非完整翻译自:https://nuxt.com/docs/getting-started/views