Nuxt3 探索(二)Nuxt3 页面的 n 种写法

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

前言

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

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

内置组件

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

<NuxtWelcome>

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

<NuxtPage>

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

xml 复制代码
<!-- 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).

用法如下:

xml 复制代码
<!-- app.vue or layouts/. -->
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<Teleport>

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

xml 复制代码
<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 语法也是自然的支持的。

xml 复制代码
<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 函数去渲染一个组件。一个简单的例子如下:

arduino 复制代码
// 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 语句即可。一个简单的例子如下:

ruby 复制代码
// 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>
  }
})

后记

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

相关推荐
Mintopia3 分钟前
计算机图形学进阶探索与实践
前端·javascript·计算机图形学
代码小学僧5 分钟前
团队协作必备!pnpm 版本管理与 corepack 使用指南
前端·node.js·团队管理
一天睡25小时5 分钟前
前端工程化&&Webpack 和 Vite 的区别
前端·前端框架
gxn_mmf5 分钟前
页面需要重加载才能显示的问题修改
前端·bug
北京_宏哥6 分钟前
🔥Jmeter(二十五) - 从入门到精通 - JMeter函数 - 下篇(详解教程)
前端·jmeter·面试
天生我材必有用_吴用8 分钟前
鸿蒙开发入门到进阶:从布局基础到组件实战
前端·harmonyos·arkts
zhangxiao9 分钟前
自定义指令 - 去除所有空格和换行
前端
前端太佬10 分钟前
微信公众号网页登录:前端视角下的技术实现精要
前端·javascript·微信
Ryan今天学习了吗11 分钟前
如何在浏览器中渲染100万个元素,并且保证页面不卡顿?超详细底层原理图文分享
前端