Nuxt3如何构建用户界面？

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

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

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

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

大部分组件是可复用的用户界面代码片断，比如按钮和菜单。在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目录中的每一个.vue文件，就是一个路由文件。可以直接在这个文件中写界面代码。

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

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

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>