Nuxt3 探索（二）Nuxt3 页面的 n 种写法

本文正在参加「金石计划」

前言

继上一篇Nuxt3 探索（一）使用 Nuxt3 搭建一个项目，我们对于 Nuxt 3 项目有了初步的了解了。

然而，"光说不练假把式"。这篇文章中，我们继续探索如何借助 Nuxt 3 的内置组件和 Nuxt3 页面的 n 种写法，快速地开发所需的页面。

内置组件

总的来说，我们可以借助 Nuxt 3 中内置的组件去开发一个新页面。比如 <NuxtWelcome>、<NuxtLink>、<ClientObly>、<Teleport>等等。

<NuxtWelcome>

之前就接触过了，这是一个模板页面，内容如下：

<NuxtPage>

我们需要在 app.vue主页面中，写入<NuxtPage />，这样才能渲染出 pages 目录中的页面。比如，我们渲染出一个导航条和 <NuxtPage /> 组件。

<!-- app.vue -->
<template>
  <div>
    <ul>
      <li v-for="(nav, i) in navArr" :key="i">
        <NuxtLink :to="nav.path">{{nav.text}}</NuxtLink>
      </li>
    </ul>
​
    <NuxtPage />
  </div>
</template>
​
<script setup>
  const navArr = [
    {
      path: '/',
      text: 'Index'
    },
    {
      path: '/home',
      text: 'Home'
    },
    {
      path: '/about',
      text: 'About'
    },
    {
      path: '/bag',
      text: 'Bag'
    },
  ]
</script>

<NuxtLink>

用于定义一个页面跳转的超链接。我们在 to 属性 指定要跳转的页面路由，此外还有 target,rel,noRel 等属性。

Props	Value
to(href)	可以是页面链接（如'/about'）或者 https链接等。
target	同 a 标签的 target 属性，可以设置 _blank 等。
rel	默认值是 noopener noreferrer
noRel	设置为 true 是，不会添加任何的 rel 属性。
activeClass	跟 Vue Router 的 active-class一致。默认值"router-link-active"
exactActiveClass	跟 Vue Router 的 exact-active-class一致。默认值"router-link-exact-active"

<ClientOnly>

该标签包裹的内容只会在客户端进行渲染。

我们可以使用 <ClientOnly> 来包裹只在客户端渲染的页面内容。

<NuxtLoadingIndicator>

展示路由跳转时的加载进度条。传参如下：

Props	Value
color	The color of the loading bar. It can be set to false to turn off explicit color styling.
height	Height of the loading bar, in pixels (default 3).
duration	Duration of the loading bar, in milliseconds (default 2000).
throttle	Throttle the appearing and hiding, in milliseconds (default 200).

用法如下：

<!-- app.vue or layouts/. -->
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<Teleport>

可以自定义页面内容（比如弹窗）的挂载 DOM。比如我们可以将弹窗挂载到 body 上：

<template>
  <button @click="open = true">
    Open Modal
  </button>
  <Teleport to="body">
    <div v-if="open" class="modal">
      <p>Hello from the modal!</p>
      <button @click="open = false">
        Close
      </button>
    </div>
  </Teleport>
</template>

组件的写法

除了使用内置组件，我们更多的是手写开发一个组件。

Nuxt 3 很灵活，支持以下格式的组件：.vue, .js, .jsx, .mjs, .ts or .tsx。

Vue3 <script setup>写法

Nuxt 3 支持 Vue3 语法，我们可以方便地书写 <script setup>，然后直接在页面中引入。此外，其他的 Vue 3 语法也是自然的支持的。

<template>
  <div>
    <div>Home page</div>
    <div class="name">Hello {{ name }}</div>
  </div>
</template>
​
<script setup>
const name = "Tom"
</script>
​
<style scoped>
.name{
  color: #0f0;
  margin-top: 20px;
}
</style>

.ts文件写法

使用 .ts 文件定义组件时，我们不需要引入 defineComponent 变量。这里借助的是 vue 的 render 函数去渲染一个组件。一个简单的例子如下：

// https://vuejs.org/guide/extras/render-function.html
export default defineComponent({
  render () {
    return h('div', 'about page')
  }
})

.tsx文件写法

使用 .tsx 文件定义组件时，同理我们不需要引入 defineComponent 变量。

如果熟悉 React 语法的话（其实不熟悉 React 也没问题...），在render() {}中 return 对应的 jsx 语句即可。一个简单的例子如下：

// https://nuxt.com/docs/examples/advanced/jsx
// https://vuejs.org/guide/extras/render-function.html#jsx-tsx
export default defineComponent({
  render () {
    return <div>Bag page</div>
  }
})

后记

这段时间，心血来潮在考虑做些什么、偶尔在深入学习某个知识点、时常在摸鱼 ==！