【Nuxt3】内置组件介绍

2024-04-08 05:20
文章标签 组件 介绍 内置 nuxt3

本文主要是介绍【Nuxt3】内置组件介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简言

介绍下nuxt3的内置组件用法。

ClientOnly

使用 <ClientOnly> 组件仅在客户端渲染组件。
属性：

  • placeholderTag | fallbackTag — 指定要在服务器端呈现的标记。
  • placeholder | fallback — 指定要在服务器端渲染的内容，并在浏览器挂载 <ClientOnly> 之前显示。

示例：

<template><div><Sidebar /><!-- This renders the "span" element on the server side --><ClientOnly fallbackTag="span"><!-- this component will only be rendered on client side --><Comments /><template #fallback><!-- this will be rendered on server side --><p>Loading comments...</p></template></ClientOnly></div>
</template>

DevOnly

使用 <DevOnly> 组件，仅在开发过程中渲染组件。
Nuxt 提供了 <DevOnly> 组件，用于仅在开发过程中呈现组件。

这些内容不会包含在生产构建中，它有一个fallback插槽可以用于在生产环境替换devOnly的内容。

这在开发时显示辅助开发工具比较有用

<template><div><Sidebar /><DevOnly><!-- this component will only be rendered during development --><LazyDebugBar /><!-- be sure to test these using `nuxt preview` --><template #fallback><div><!-- empty div for flex.justify-between --></div></template></DevOnly></div>
</template>

NuxtClientFallback

Nuxt 提供了 <NuxtClientFallback> 组件，用于在其任何子组件触发 SSR 中的错误时在客户端呈现其内容。

这个是实验性的，需要在nuxt.config.ts配置才可开启

export default defineNuxtConfig({experimental: {clientFallback: true}
})

slots

#fallback：指定插槽渲染失败时在服务器端显示的内容。

示例

  <template><!-- render <span>Hello world</span> server-side if the default slot fails to render --><NuxtClientFallback fallback-tag="span" fallback="Hello world"><BrokeInSsr /></NuxtClientFallback></template>

NuxtPage

需要使用 <NuxtPage> 组件来显示位于 pages/ 目录中的页面。
NuxtPage 是 Nuxt 的内置组件。它允许你显示位于 pages/ 目录中的顶层或嵌套页面。

它相当于vue-router的routerview，并且接收相同的name和route属性

属性

  • name — 会告诉 RouterView 渲染匹配路由记录组件选项中对应名称的组件。
  • route — 已解决所有组件的路由位置。
  • pageKey — 渲染 NuxtPage 组件的key。
  • transition — 为使用 NuxtPage 组件渲染的所有页面定义全局过渡效果。
  • keepalive — 控制使用 NuxtPage 组件渲染的页面的状态保存。

Nuxt 通过扫描和渲染在 /pages 目录中找到的所有 Vue 组件文件，自动解析名称和路由。

示例

一般情况直接使用<NuxtPage />就好。

<template><div><NuxtPage /></div>
</template>
<script lang="ts" setup></script>

NuxtLayout

用于在页面使用layouts目录下的布局。
<NuxtLayout /> 通过 <slot /> 渲染传入内容，然后将其包裹在 Vue 的 <Transition /> 组件周围，以激活布局转换。为使其达到预期效果，建议 <NuxtLayout /> 不是页面组件的根元素。

<template>
<div><NuxtLayout>some page content</NuxtLayout></div>
</template>

默认情况下，他使用的是layouts目录下的default布局。

属性

  • name — 指定要渲染的布局名称，可以是字符串、反应式引用或计算属性。该名称必须与 layouts/ 目录中相应布局文件的名称一致。

示例

default布局

<template><div class="default"><div><h1>这是default布局</h1></div><slot /><slot name="footer"></slot></div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
</script>
<style lang="scss" scoped></style>

使用：

<template><div><NuxtLoadingIndicator color="green" /><NuxtLayout><NuxtPage /><template #footer><div>底部内容</div></template></NuxtLayout></div>
</template>
<script lang="ts" setup></script>

在这里插入图片描述

NuxtLink

Nuxt 提供了 <NuxtLink> 组件，用于处理应用程序中的各种链接。

是 Vue Router 的 <RouterLink> 组件和 HTML 的 <a> 标记的直接替代品。它能智能判断链接是内部链接还是外部链接，并通过可用的优化（预取、默认属性等）进行相应的渲染。

属性

在不使用外部链接时，<NuxtLink> 支持所有 Vue 路由器的 RouterLink 属性：

  • to — 任何 URL 或 Vue 路由器中的路由位置对象。
  • custom — 自定义导航工作方式，与vue-router的custom属性相同。
  • exactActiveClass ： 指定点击后的类样式。其作用与 Vue 路由器的 exact-active-class prop 在内部链接上的作用相同。默认为 Vue 路由器的默认 “router-link-exact-active”）。
  • replace — 与 Vue Router 在内部链接上的replace属性功能相同。
  • ariaCurrentValue — 与 Vue Router 的 aria-current-value prop 在内部链接上的作用相同.
  • activeClass — 其作用与 Vue Router 的 active-class prop 在内部链接上的作用相同。默认值为 Vue 路由器的默认值（"router-link-active）。
  • href — to 的别名。如果与 to 一起使用，href 将被忽略。
  • noRel — 如果设置为 true，则不会在链接中添加 rel 属性。
  • external — 强制链接以 a 标记而不是 Vue Router RouterLink 的形式呈现。
  • prefetch — 启用后，将预取视口中链接的中间件、布局和有效载荷（使用 payloadExtraction 时）。由实验性的 crossOriginPrefetch 配置使用。
  • noPrefetch — 禁用预取。
  • prefetchedClass — 用于预取链接的类。
  • target — 应用于链接的目标属性值。
  • rel — 用于链接的 rel 属性值。外部链接默认为 “noopener noreferrer”。

示例

<template><NuxtLink to="https://twitter.com/nuxt_js" target="_blank">Nuxt Twitter</NuxtLink><!-- <a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener noreferrer">...</a> --><NuxtLink to="https://discord.nuxtjs.org" target="_blank" rel="noopener">Nuxt Discord</NuxtLink><!-- <a href="https://discord.nuxtjs.org" target="_blank" rel="noopener">...</a> --><NuxtLink to="https://github.com/nuxt" no-rel>Nuxt GitHub</NuxtLink><!-- <a href="https://github.com/nuxt">...</a> --><NuxtLink to="/contact" target="_blank">Contact page opens in another tab</NuxtLink><!-- <a href="/contact" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

NuxtLoadingIndicator

在页面导航之间显示进度条。

属性

  • color — 加载条的颜色。可将其设置为 false，以关闭明确的颜色样式。
  • height — 加载条高度，默认3px。
  • duration — 加载条的持续时间，毫秒（默认为 2000）。
  • throttle — 限制出现和隐藏的时间，毫秒数（默认 200）。
  • estimatedProgress — 默认情况下，Nuxt 会在接近 100% 时退出。你可以提供一个自定义函数来自定义进度估算，这是一个接收加载条（上图）持续时间和已用时间的函数。它应该返回一个介于 0 和 100 之间的值。

您可以使用 useLoadingIndicator 可组合挂钩到底层指标实例，这样就可以自己触发开始/结束事件。

示例

    <NuxtLoadingIndicator color="green" />

NuxtErrorBoundary

<NuxtErrorBoundary> 组件处理在其默认槽中发生的客户端错误。

slots

#error：指定出错时要显示的后备内容。

示例

  <template><NuxtErrorBoundary><!-- ... --><template #error="{ error }"><p>An error occurred: {{ error }}</p></template></NuxtErrorBoundary></template>

NuxtWelcome

<NuxtWelcome> 组件用于在使用启动模板制作的新项目中向用户致意。
它包括 Nuxt 文档、源代码和社交媒体账户的链接。

没屁用

示例

<template><NuxtWelcome />
</template>

NuxtIsland

Nuxt 提供了 <NuxtIsland> 组件，用于呈现非交互式组件，无需任何客户端 JS。
在渲染island组件时，island组件的内容是静态的，因此客户端无需下载 JS。
更改island组件道具会触发island组件的重新获取，从而再次重新渲染。

仅服务器组件在引擎盖下使用 <NuxtIsland>

这是一个提高性能的组件，如果你的组件内容只需要在服务端加载运行一次就行，然后在客户端只显示，不做后续交互，即可使用它。

它是实验性的组件 ,需要以下配置

// nuxt.config.ts
export default defineNuxtConfig({experimental: {componentIslands: true}
})

属性

  • name — 要渲染的组件名称。
  • lazy — 使组件不阻塞。
  • props — 要发送给组件进行渲染的属性。
  • source — 调用island 渲染的远程源。
  • dangerouslyLoadClientComponents — 需要从远程源加载组件。

强烈不建议启用危险加载客户端组件（dangerouslyLoadClientComponents），因为远程服务器的 javascript 不可信。

slots

如果声明了插槽，插槽可以传递给岛组件。
由于提供插槽的是父组件，因此每个插槽都是交互式的。

#fallback：指定在岛屿加载前（如果组件是懒惰的）或 NuxtIsland 无法获取组件时要渲染的内容。

示例

<template><NuxtIsland name="Hello" />
</template>

NuxtImg

Nuxt 提供了一个<NuxtImg> 组件来处理自动图像优化。

<NuxtImg> 是本地 标签的直接替代品。

  • 使用内置提供程序优化本地和远程图像
  • 将 src 转换为提供程序优化的 URL
  • 根据宽度和高度自动调整图片大小
  • 在提供尺寸选项时生成响应尺寸
  • 支持本地懒加载和其他 <img> 属性

详细内容请参考：NuxtImage

使用

要使用 <NuxtImg>，必须安装并启用 Nuxt Image 模块：

npx nuxi@latest module add image

<NuxtImg> 可直接输出原生 img 标记（周围没有任何封装）。使用它就像使用 标签一样：

<NuxtImg src="/nuxt-icon.png" />

NuxtPicture

Nuxt 提供了一个 <NuxtPicture> 组件来处理自动图像优化。
<NuxtPicture> 是原生 <picture> 标签的直接替代品。
<NuxtPicture> 的用法与 <NuxtImg> 几乎相同，但它也允许在可能的情况下提供 webp 等现代格式。

要使用 <NuxtPicture>，必须安装并启用 Nuxt Image 模块：

npx nuxi@latest module add image

Teleport

<Teleport> 组件可将组件传送到 DOM 中的不同位置。
和vue的teleport组件一样。

示例

<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>
<template><ClientOnly><Teleport to="#some-selector"><!-- content --></Teleport></ClientOnly>
</template>

结语

结束了。

这篇关于【Nuxt3】内置组件介绍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/884672。

相关文章

揭秘未来艺术：AI绘画工具全面介绍

揭秘未来艺术：AI绘画工具全面介绍

📑前言 随着科技的飞速发展，人工智能（AI）已经逐渐渗透到我们生活的方方面面。在艺术创作领域，AI技术同样展现出了其独特的魅力。今天，我们就来一起探索这个神秘而引人入胜的领域，深入了解AI绘画工具的奥秘及其为艺术创作带来的革命性变革。 一、AI绘画工具的崛起 1.1 颠覆传统绘画模式 在过去，绘画是艺术家们通过手中的画笔，蘸取颜料，在画布上自由挥洒的创造性过程。然而，随着AI绘画工
阅读更多...
公共筛选组件（二次封装antd）支持代码提示

公共筛选组件（二次封装antd）支持代码提示

如果项目是基于antd组件库为基础搭建，可使用此公共筛选组件 使用到的库 npm i antdnpm i lodash-esnpm i @types/lodash-es -D /components/CommonSearch index.tsx import React from 'react';import { Button, Card, Form } from 'antd'
阅读更多...
20.Spring5注解介绍

20.Spring5注解介绍

1.配置组件 Configure Components 注解名称说明@Configuration把一个类作为一个loC容 器 ，它的某个方法头上如果注册7@Bean , 就会作为这个Spring容器中的Bean@ComponentScan在配置类上添加@ComponentScan注解。该注解默认会扫描该类所在的包下所有的配置类，相当于之前的 <context:component-scan>@Sc
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
C++标准模板库STL介绍

C++标准模板库STL介绍

STL的六大组成部分 STL（Standard Template Library）是 C++ 标准库中的一个重要组成部分，提供了丰富的通用数据结构和算法，使得 C++ 编程变得更加高效和方便。STL 包括了 6 大类组件，分别是算法（Algorithm）、容器（Container）、空间分配器（Allocator）、迭代器（Iterator）、函数对象（Functor）、适配器（Adapter）
阅读更多...
Transformers和Langchain中几个组件的区别

Transformers和Langchain中几个组件的区别

1.对于Transformers框架的介绍 1.1 介绍： transformers 是由 Hugging Face 开发的一个开源库，它提供了大量预训练模型，主要用于自然语言处理（NLP）任务。这个库提供的模型可以用于文本分类、信息抽取、问答、文本生成等多种任务。 1.2 应用场景： 文本分类：使用 BERT、RoBERTa 等模型进行情感分析、意图识别等。命名实体识别（NER）：使用序列
阅读更多...
一二三应用开发平台应用开发示例（4）——视图类型介绍以及新增、修改、查看视图配置

一二三应用开发平台应用开发示例（4）——视图类型介绍以及新增、修改、查看视图配置

调整上级属性类型 前面为了快速展示平台的低代码配置功能，将实体文件夹的数据模型上级属性的数据类型暂时配置为文本类型，现在我们调整下，将其数据类型调整为实体，如下图所示： 数据类型需要选择实体，并在实体选择框中选择自身“文件夹” 这时候，再点击生成代码，平台会报错，提示“实体【文件夹】未设置主参照视图”。这是因为文件夹选择的功能页面，同样是基于配置产生的，因为视图我们还没有配置，所以会报错。
阅读更多...
49-1 内网渗透 - Bypass UAC介绍

49-1 内网渗透 - Bypass UAC介绍

一、Bypass UAC         用户账户控制（UAC）是Windows操作系统的一种安全机制，旨在防止未经授权的应用程序自动安装并防止非授权修改系统设置。它确保应用程序和任务通常在非管理员账户的安全上下文中运行，除非明确需要管理员权限，用户才会被提示确认。         对于非RID 500的管理员用户（除了内置的Administrator账户），当他们登录时，系统会为其分配两个访
阅读更多...
okhttp3的详细介绍

okhttp3的详细介绍

这篇文章说下OkHttp的基本用法，是最新的3哦，如果你曾经在网上搜索OkHttp怎么使用发现有些类没有了可能是因为人家说的是2。首先说下OkHttp3是Java和Android都能用，Android还有一个著名网络库叫Volley，那个只有Android能用。导入自己到入jar包，别漏了okio：okhttp-3.3.0.jarokio-1.8.0.jarmaven方式：<dependen
阅读更多...
Retrofit详细介绍

Retrofit详细介绍

转载请标明出处：http://blog.csdn.net/xx326664162/article/details/51910837 文章出自：薛瑄的博客 你也可以查看我的其他同类文章，也会让你有一定的收货！ 一、Retrofit 是什么？ Retrofit is a type-safe HTTP client for Android and java. Retrofit 是与 Web 服务器提
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2