Nuxt 菜鸟入门学习笔记三：视图-Javascript前端- WEB程序开发笔记

Nuxt 菜鸟入门学习笔记三：视图

原创
作者：phpEcho
发布时间：2023-08-26 00:01
标签： Nuxt SSR 服务端渲染
浏览量：447

本文内容由 Nuxt 官网翻译而来，主要介绍了 Nuxt 视图部分。

[TOC]

![Nuxt](https://cnd.51blog.xyz/images/nuxt-logo.png)
Nuxt 官网地址：[https://nuxt.com/](https://nuxt.com/)

Nuxt 提供多个组件层来实现应用程序的用户界面。

- 入口文件 App.vue
- 组件 Components
- 页面 Pages
- 布局 Layouts

下面逐一进行介绍。

# 入口文件

默认情况下，Nuxt 会将 app.vue 文件视为入口点，并在应用程序的每个路由中呈现其内容。下面的代码片段是 app.vue 文件的基础代码结构：

```vue
// App.vue

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

> 如果您熟悉 Vue，可能会想知道 main.js 在哪里（通常创建 Vue 应用程序的文件）。Nuxt 在幕后完成了这项工作。

# 组件 Components

大多数组件都是用户界面中可重复使用的部分，如按钮和菜单。在 Nuxt 中，您可以在 components/ 目录中创建这些组件，它们将自动在您的应用程序中可用，而无需显式导入。

- **创建组件**
  在 components 目录下创建 AppAlert.vue 文件，即是创建了一个名为`AppAlert`的组件，应用启动后，它就被自动加载，无需导入即可使用。

```vue
// components/AppAlert.vue

- **使用组件**
  在其他页面（如 app.vue）中直接使用：

```vue
// app.vue

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>AppAlert Component.</AppAlert>
  </div>
</template>
```

# 页面 Pages

页面代表每个特定路由模式的视图。pages/ 目录中的每个文件都代表了显示其内容的不同路由。

通过在 pages/ 目录下创建 .vue 文件以创建更多页面及其相应路由，并在 app.vue 中添加 `<NuxtPage />` 组件来加载匹配当前路由模式的。

下面创建两个页面做示例：

- 创建 pages/index.vue 文件

```vue
<template>
  <div>
    <h1>@ index page</h1>
    <AppAlert>AppAlert Component.</AppAlert>
  </div>
</template>
```

- 创建 pages/about.vue 文件

```vue
<template>
  <div>
    <h1>@ about page</h1>
    <AppAlert>AppAlert Component.</AppAlert>
  </div>
</template>
```

创建的页面如何通过路由访问呢？此处先做简单介绍，后续会写一篇专门介绍路由的文章。

- 首先需要 nuxt.config.ts 增加配置项 `pages:true`
- 在 App.vue 文件中增加 `<NuxtPage />` 组件来展示请求的路由对应文件内容。
- pages 目录下 index.vue 文件将映射到应用程序的 / 根路由，其他文件则以文件名为路由。也就是说访问 http://localhost:3000 就展示 index.vue 的内容，访问 http://localhost:3000/about 就展示 about.vue 的内容

> 注意：pages/index.vue 只能通过 http://localhost:3000 来访问，不能通过 http://localhost:3000/index 访问（访问会报 404 错）。

# 布局 Layouts

布局是围绕包含多个页面的公共用户界面的页面的包装器，例如页眉和页脚显示。
布局是使用 <slot /> 组件显示页面内容的 Vue 文件。默认情况下将使用 layouts/default.vue 文件。
布局被放置在 layouts/目录中，使用时将通过异步导入自动加载。

> 如果您的应用程序中只有一个布局，我们建议您使用带有 NuxtPage 组件的 app.vue 代替。

默认布局的使用方法是将 `<NuxtLayout>` 添加到 app.vue 中。（更多自定义布局使用方法后续会写专篇文章来做分享）

- 创建默认布局文件

```
// layouts/default.vue

<template>
  <div>
    <div class="header">header Block</div>
    <slot />
    <div class="footer">footer Block</div>
  </div>
</template>

.footer {
  border-top: 1px solid #e0e0e0;
  text-align: center;
}
</style>
```

- 使用布局

需要在 app.vue 文件中添加 `<NuxtLayout>` 组件：

```vue
// app.vue

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

此时再访问 http://localhost:3000 和 http://localhost:3000/about 就可以看到 layout 的效果了。

WEB程序开发笔记

Nuxt 菜鸟入门学习笔记三：视图

文章归档

推荐文章

热门标签

友情链接