首页
最新

Nuxt 3 多路径访问同一页面的三种方式:重定向、别名与动态路由

今天看到有小伙伴在Nuxt 3文中社区群里问到这个问题,那就顺便写一篇文章来回答,并且重温一下Nuxt3的路由。 Nuxt 3 多路径访问同一页面 在 Nuxt 3 中,如果你想让两个不同的路径访问同一个页面,有以下几种实现方式: 重定向方式:在其中一个路径中使用 navigateTo 方法重定向到目标页面。 路由别名:在 nuxt.config.ts 中配置路由
发布于 2024-11-16 下午3:39 阅读数 96

vue3 + Nuxt3 使用AutoAnimate可以快速添加动画

AutoAnimate是什么? 这是FormKit提供的一个动画库。只要安装了这个库,你就可以非常轻松地使用它。虽然这个库支持Vue、React、Preact、Solid、Svelta、Angular和NativeJS,但在本文中,我将介绍如何在Vue中使用它。 官方文档: https://auto-animate.formkit.com/ 设置 首先进行安装 npm install @formkit/auto-animate 接着,在nuxt.con
发布于 2024-9-9 下午5:3 阅读数 673

[Nuxt3/TS] 如何指定ES版本

在使用Nuxt3进行开发时,在服务器模块(/server/api)中处理Bigint时,出现了以下错误: 错误:在配置的目标环境("es2019")中无法使用大整数字面量。 从es2020开始支持Bigint,因此,看来需要更改TypeScript的版本。 服务器模块由Nuxt3内部的Nitro引擎驱动,因此,需要将设置传递给Nitro引擎。 可以在nuxt.config.ts中来指定ES版本: expo
发布于 2024-5-12 下午9:29 阅读数 1119

用nuxt3官方提供的nuxt-icon插件来引入iconify的海量图标

旧的引用方式 这里我们不用ant蚂蚁框架的图标,我们从iconify从导入图标。 iconify图标是一种矢量图标格式,它可以以小尺寸的形式显示在各种设备上,如移动设备、桌面应用程序和网页。iconify图标可以缩放到任何尺寸而不失真,并且可以通过CSS或JavaScript进行动态更改。Iconify图标还支持多种颜色和主题,使其适合各种不同的设计需
发布于 2024-4-14 下午10:0 阅读数 1531

Nuxt3 - 使用 SheetJs 将 JSON 转换并下载为 Excel 文件

安装 npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz 参考文档:https://docs.sheetjs.com/docs/ 代码示例: <script setup> import { ref } from 'vue' import { utils, writeFileXLSX } from 'xlsx' const pres = ref([ { name: '小丽', birthday: '1998-02-22' }, { name: '小美', birthday: '1
发布于 2024-3-17 下午8:50 阅读数 1174

Nuxt3 – 使用navigateTo更改URL查询并使用watch进行监控

<script lang="ts" setup> const route = useRoute() watch( () => route.query, () => { console.log(route['query']) } ) function move() { navigateTo({ name: 'example', query: { foo: 'bar' }, }) } </script> <template> <button @click="move">move</button> </template&g
发布于 2023-11-7 下午2:13 阅读数 3708

解决antd v4.x版本和Nuxt3样式会闪的问题

antdv从4.0.x开始官方提供了@ant-design-vue/nuxt模块包,但如果你只是使用它,不做任何处理的话,你就会发现你的页面在刷新时会短暂的出现css样式丢失的问题,导致页面闪烁,本文就教大家如何解决该问题。 首先,在新建的nuxt3项目中安装相关依赖 pnpm add -D ant-design-vue@4.x pnpm add -D @ant-design-vue/nuxt 在nuxt.config
发布于 2023-10-22 上午9:33 阅读数 4939

Nuxt3.7.1版本引入@nuxtjs/i18n 实现国际化

首先也是要去安装 # Using npm npm install @nuxtjs/i18n@next --save-dev # Using yarn yarn add --dev @nuxtjs/i18n@next # Using pnpm pnpm install --shamefully-hoist -D @nuxtjs/i18n@next 配置nuxt-config.ts export default defineNuxtConfig({ modules: [ '@nuxtjs/i18n', ], }) 配置i18n export default defineN
发布于 2023-9-7 上午11:56 阅读数 15517

最新版Nuxt3.6.5与Antd4.0版本的安装

Nuxt3 可以说是隔三差五就更新,时不时就加点小功能,如果加了开发者模式devtools,在最新的Nuxt3.6.5中解决了 v3.6.4 中引入的 nuxt/content 的回归问题。 它更新的时候,对我们使用的UI框架也会有一些影响,拿最新版的Antd4.0框架来说,根据Antd官方给的安装方式https://next.antdv.com/docs/vue/introduce-cn 也是可以使用,但是
发布于 2023-8-4 下午6:23 阅读数 12510

Cannot start nuxt: Cannot find module 'typescript'

升级到Nuxt3.6报错 Cannot start nuxt: Cannot find module 'typescript' 解决该报错我们只需要安装下typescript依赖即可 yarn add typescript --dev 参考:https://github.com/nuxt/nuxt/issues/21723
发布于 2023-6-25 上午10:17 阅读数 10395

nuxt3 中的 Websocket / SSE(Server-sent events) 客户端实现

什么是SSE SSE(Server-sent events)是一种用于服务器向客户端推送数据的技术,它基于 HTTP 协议,允许服务器不断地向客户端发送事件流数据。与传统的轮询或长轮询相比,SSE 更加高效、实时,并且可以降低服务器和客户端的负载。 SSE 的工作原理是客户端通过 HTTP 请求与服务器建立连接,然后服务器可以在连接保持打开的情况下,不断
发布于 2023-6-10 下午9:13 阅读数 3860

Nuxt3环境变量配置

本文节选自TeHub小书:https://tehub.com/b/show/9rRbSM55RP/chapter/bMn14mFXKS Nuxt3环境变量配置 通常我们的应用程序会有多个运行环境。比如开发环境、测试环境、预发布环境、生产环境等。而不同环境我们的配置内容可能不一样,这个时候就需要通过环境变量来解决。 Nuxt3 会自动加载 .env 文件中的所有变量,但对于多环境及多个.
发布于 2023-3-16 下午4:29 阅读数 2226

Nuxt3创建WebSocket服务器

虽然官方说目前nuxt3服务端暂不支持创建ws服务器,详见:https://github.com/unjs/nitro/issues/467 https://github.com/nuxt/nuxt/discussions/16663 但是我们还是可以通过以下两种方案启动一个ws服务器 方案一:开发模式hook启动Ws服务器 但是我们开发模式下(yarn dev)还是可以创建一个ws服务器的 安装ws包 yarn add ws 创建
发布于 2023-3-1 下午6:5 阅读数 2652

Nuxt3 报错Hydration node mismatch

本文内容节选自tehub小书 https://tehub.com/b/show/9rRbSM55RP/chapter/bw7Ta7r6Jx 这个报错目前暂不清楚是Nuxt3还是Antdv或是Vue3导致的。 报错示例 创建一个nuxt3页面pages/test.vue,内容如下: <template> <a-dropdown> <a class="ant-dropdown-link" @click.prevent> Hover me <DownOutlined /&gt
发布于 2023-2-20 下午1:41 阅读数 2183

Nuxt3

文章: 14关注: 5点击: 0
推荐作者
用追剧的耐心去看他们的演讲和传记。 用黑粉的态度去扒他们每句话背后的意图。 用买周边的钱去提升自己,去成功人士的身边工作,哪怕只是一个小职员。
暂无描述
云原生是基于分布部署和统一运管的分布式云 ,以容器、微服务、DevOps等技术为基础建立的一套云技术产品体系。
阿里巴巴淘系技术
暂无描述