【Nuxt3系列三】视图Views

本节对应的官方教程

app.vue

传统的Vue项目，都是有一个main.js作为入口，然后在app.vue进行挂载这个main.js

但是在Nuxt3中，框架自动帮你省略了这个步骤，app.vue就是默认入口了。

我们第一章新建的项目中，默认的app.vue如下

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div>
</template>

组件 components

大部分组件，都是可以重用的。只需要在根目录下的components创建对应的Vue文件，nuxt就可以自动导入！

例如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>

页面 pages

Nuxt3基于文件生成路由。在根目录的pages/下创建 index.vue和about.vue

那么访问/index和about就可以访问到对应的文件了。

注意！！！

如果不删除app.vue，需要在app.vue中添加<NuxtPage/>组件 否则是无法访问index.vue的

删除了app.vue之后，pages/index.vue就是默认的入口了

布局 layouts

布局是一个使用<slot/>包裹着pages的vue文件。所有的pages的默认布局都是default.vue

app.vue中，使用NuxtLayout标签包裹着NuxtPage标签

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

在根目录下创建layouts/default.vue。其中AppHeader和AppFooter都是组件

<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>