Vue3
花花鱼
点滴积累,你会发现有大大的进步。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vxe-grid在树形模式下通过$grid.getTableData().fullData无法获取到所有数据的简单处理
摘要:本文探讨了在启用树形结构时获取表格数据的解决方案。当启用树形模式时,getTableData下的属性(footerData、fullData等)无法获取全部记录,建议通过proxyInfo.data获取数据。若需使用fullData,需禁用树形模式。同时提供了启用/禁用树形模式的具体设置方法,帮助开发者灵活应对不同场景下的数据获取需求。(99字)原创 2025-10-03 17:26:47 · 310 阅读 · 0 评论 -
vue3 页面传值与SFC的用法如何共用,及现实开发中碰到的问题处理
Vue3单文件组件(SFC)中提供了多种传值方式:1)父子组件通过props/emits通信;2)跨层级组件使用provide/inject;3)路由组件间通过路由参数传递;4)全局状态使用Pinia管理。针对特定场景,可将页面组件改造成子组件,通过props实现数据传递,避免直接跳转,保持业务逻辑复用和代码一致性。实际开发中需根据项目需求灵活选择传值方式,平衡开发效率与维护成本。原创 2025-09-04 11:32:23 · 577 阅读 · 1 评论 -
ts Promise的使用
本文介绍了TypeScript中Promise的概念和应用,通过一个基于JSONPlaceholder API的示例展示了Promise如何优化异步操作。Promise的三种状态(pending、fulfilled、rejected)确保了异步操作的可控性。文章详细解析了fetchData函数的实现,包括请求发送、响应处理、错误处理和超时机制等关键环节。示例代码演示了如何使用Promise.all进行并行请求,以及自动重试等增强功能。通过Vue组件展示了数据获取的完整流程,包括加载状态、错误处理和UI渲染。原创 2025-08-24 15:07:24 · 1262 阅读 · 0 评论 -
Nest.js、Knex.js、Nuxt.js、Next.js 和 Spring Boot的异同相关概念
Nest.js、Knex.js、Nuxt.js、Next.js和SpringBoot分属不同技术领域,具备服务端能力和数据库交互支持。Nuxt.js(Vue)和Next.js(React)是前端框架,支持SSR/SSG;Nest.js是Node.js后端框架;Knex.js是Node.js数据库工具;SpringBoot是Java企业级框架。它们都可提升开发效率,但定位不同:Nuxt/Next侧重前端渲染,Nest/SpringBoot专注后端服务,Knex专精SQL操作。典型组合包括全栈JS方案(Vue/原创 2025-08-14 11:51:54 · 1154 阅读 · 0 评论 -
antdv Modal的简单使用
AntDesignVue的Modal组件是一个功能丰富的弹窗控件,支持自定义显示/隐藏(title、width)、遮罩层(mask)和关闭行为(closable、maskClosable)。提供按钮配置(okText、cancelText)和事件监听(@ok、@cancel)。可通过v-model绑定visible状态,支持模板内声明式调用或服务端API方式(Modal.info/success/confirm)。典型使用场景包括信息展示、表单提交和操作确认,支持内容自定义和回调处理,是构建交互式界面的常用原创 2025-08-13 16:36:39 · 837 阅读 · 0 评论 -
vue3 关键词查询 防抖
Vue3中实现防抖功能可通过自定义hook或lodash-es库实现,适用于搜索框、窗口resize等频繁触发场景。自定义hook(useDebounce)通过watch监听值变化并延迟更新,可复用且灵活设置延迟时间。lodash-es方案更成熟,提供cancel等高级功能。两种方式都能有效减少不必要的API调用,提升性能。测试表明防抖后只在输入停止时触发请求,显著降低服务器压力并获取有效数据。实现时需根据项目需求选择方案,注意组件卸载时取消防抖。原创 2025-08-07 16:12:49 · 614 阅读 · 0 评论 -
vue3 import 与 const 定义组件的时候,区别在哪里,为什么import可以生效,而const定义的不生效...
本文对比了动态导入与静态导入的区别。动态导入(()=>import())按需加载组件,适合路由懒加载,减少初始资源但首次加载有延迟;静态导入(import)则立即加载所有组件,增大初始体积但使用无延迟。在路由配置中,静态导入直接使用组件对象,而动态导入需作为函数调用。创建动态路由时,若使用const定义的导入函数,必须调用该函数(如loadComponent())而非仅引用函数名。正确做法是直接使用箭头函数或调用预先定义的函数来确保组件加载。原创 2025-07-30 10:06:24 · 1096 阅读 · 0 评论 -
vben-admin 导入并使用基础版的vxe-table
本文介绍了两种使用vxe-table的方法:1) 封装后的useVbenVxeGrid组件,通过导入封装函数并配置gridOptions实现表格渲染,支持边框、斑马纹等样式切换;2) 原生vxe-table的使用方式,需单独安装依赖并配置columns和data。针对样式问题,文中指出需要在bootstrap.ts中进行额外配置才能获得理想效果。两种方法都能实现表格功能,封装版提供了更简洁的API和内置功能,而原生版需要自行处理更多细节。原创 2025-07-20 14:55:39 · 1305 阅读 · 1 评论 -
使用pnpm安装项目的生产依赖dependencies和开发依赖devDependies及pnpm工作空间等简单使用方法说明
本文介绍了pnpm包管理工具在生产依赖(dependencies)和开发依赖(devDependencies)的区别及使用方法。生产依赖用于生产环境,开发依赖仅用于开发阶段。文章详细讲解了基础安装命令、高级安装选项(指定版本、全局安装)、安装策略(锁定文件、生产依赖)以及验证安装结果的方法。同时提供了依赖管理技巧(批量更新、移除依赖)和常见场景示例(初始化项目、迁移项目)。还介绍了pnpm工作空间(Workspaces)的使用指南,包括初始化工作空间、创建子包、跨包依赖管理、工作空间命令和高级配置等内容,帮原创 2025-07-20 10:33:57 · 3188 阅读 · 0 评论 -
@types/md5 等等 类型声明文件的作用
摘要:通过pnpm安装md5库后,在TypeScript项目中需额外安装@types/md5类型声明文件以获得类型检查和智能提示。使用时直接导入md5并调用方法即可,但在Vue3组件中需要正确配置。类型声明文件能确保第三方JS库的类型安全,若遇版本冲突可通过调整tsconfig.json解决。安装时需注意包名格式为@types/md5,而非types/md5。原创 2025-07-19 16:07:11 · 522 阅读 · 0 评论 -
import.meta.glob 与 import.meta.env、import的几个概念的简单回顾
本文对比了前端开发中import.meta.glob与import.meta.env两个关键特性。import.meta.glob用于基于glob模式动态导入多个模块(如批量加载组件),在构建时静态分析并优化代码;import.meta.env则用于访问环境变量(如API地址),在运行时读取配置。两者通过import.meta对象提供,但功能互补:前者解决模块组织问题,后者处理环境配置。文章还详细介绍了在Vue3中的应用场景,包括组件注册、路由懒加载等实践,并强调了环境变量安全性、路径匹配规则等注意事项。最原创 2025-07-19 10:06:51 · 1976 阅读 · 0 评论 -
No catalog entry ‘md5‘ was found for catalog ‘default‘. 的简单解决方法
文章摘要:解决pnpm安装md5依赖报错问题。首先通过pnpm add -D md5 -w命令安装时遇到错误,解决方法是在pnpm-workspace.yaml文件中添加配置后重新安装。也可尝试直接运行pnpm install。最后在apps项目中成功引入md5,验证版本号显示正常后即可正常使用。整个过程涉及依赖安装、配置文件修改和项目引用验证三个关键步骤。原创 2025-07-17 20:15:22 · 612 阅读 · 0 评论 -
vue login页面通过不同的query来传递来进入不同的页面,或者通过这个query去访问不同的功能,比如说手机(平板)或PC上的功能不一样,及基于vben admin 框架的一些处理
该项目旨在实现一个兼容手机(包括平板)和PC端的登录页面,使用同一套代码但根据不同设备进行不同处理,以便于维护。开发过程中遇到的主要问题是手机端登录后显示了PC端的功能,原因是查询参数丢失。为了解决这一问题,开发团队在登录链接中加入了查询参数(如p=1表示手机端,p=2表示平板端),以区分设备类型。尽管可以通过设备识别来处理,但由于平板设备识别问题,采用查询参数更为可靠。测试结果显示,该方法有效且不影响PC端的操作。然而,首次登录后直接关闭再扫码登录时,系统会直接跳转到主界面,导致lType参数丢失,显示P原创 2025-05-17 18:56:50 · 473 阅读 · 0 评论 -
antdv3 Tabs.TabPane 右上角增加一个角标Badge
本文介绍了如何使用Tabs和Badge组件实现特定的界面效果。通过代码示例,展示了如何设置Tabs的activeKey属性,并在TabPane中使用Badge组件显示角标。具体实现包括:1)在key="1"时,直接通过tab属性展示内容;2)在key="2"时,使用<template#tab>自定义显示内容,并可通过dot或count属性控制角标的显示形式。用户可根据需求调整代码,实现不同的界面效果原创 2025-05-15 20:01:49 · 763 阅读 · 0 评论 -
vue3 antdv Tooltip显示的内容换行
Tooltip 查看类型title:string|slot,也就是说我们可以用slot来处理。直接给title换行,并且写上<br /> 是不会换行的。Tip:这样就显示了换行的状态了。2、使用title直接赋值。原创 2025-04-16 17:13:36 · 641 阅读 · 0 评论 -
node-modules-inspector 可视化node_modules
node-modules-inspector 可视化node_modules pnpx node-modules-inspector原创 2025-04-02 11:09:59 · 705 阅读 · 0 评论 -
event的几个常用事件,及vue3中常用按键修饰符的简单说明
event的几个常用事件,及vue3中常用按键修饰符的简单说明原创 2025-04-01 10:39:04 · 716 阅读 · 0 评论 -
tsconfig.json中的noImplicitAny的说明
tsconfig.json中的编译选项 noImplicitAny的说明原创 2025-03-31 20:33:33 · 791 阅读 · 0 评论 -
vue3 动态组件 实例的说明,及相关的代码的优化
vue3 动态组件 实例的说明,及相关的代码的优化原创 2025-03-28 15:44:27 · 433 阅读 · 0 评论 -
vue3 UnwrapRef 与 unref的区别
UnwrapRef主要用于类型系统,确保类型安全地解析嵌套的Ref对象。unref用于在运行时获取ref对象的当前值,提供类型安全的方式访问ref的值。原创 2025-03-23 15:26:05 · 798 阅读 · 0 评论 -
vxe-grid 不增加行的时候默认高度,增加以后,自动根据增加的行数,自动计算表格高度的,使用computed或者watch简单实现方法
vxe-grid 不增加行的时候默认高度,增加以后,自动根据增加的行数,自动计算表格高度的,使用computed或者watch简单实现方法原创 2025-03-21 15:48:29 · 578 阅读 · 0 评论 -
vue3 通过内置插件:vite-plugin-vue-devtools 或者 手工编译vue.js devtools,安装chrome 浏览器扩展,以支持查看基于vite创建的sfc项目的组件结构
vue3 通过内置插件:vite-plugin-vue-devtools 或者 手工编译vue.js devtools,安装chrome 浏览器扩展,以支持查看基于vite创建的sfc项目的组件结构原创 2025-03-19 20:55:41 · 1674 阅读 · 0 评论 -
vue3 引入element-plus组件后,发现输入的时候没有提示,而且鼠标移到el-button显示unknown的简单解决方法
vue3 引入element-plus组件后,发现输入的时候没有提示,而且鼠标移到el-button显示unknown的简单解决方法原创 2025-03-18 16:24:58 · 2011 阅读 · 0 评论 -
vscode vue3 jsconfig 与 tsconfig的区别
vscode vue3 jsconfig 与 tsconfig的区别原创 2025-03-18 10:29:16 · 1852 阅读 · 0 评论 -
使用unplugin-auto-import自动导入vue3的api,不需要在每一个.vue文件中重复去导入操作
使用unplugin-auto-import自动导入vue3的api,不需要在每一个.vue文件中重复去导入操作原创 2025-03-17 16:58:37 · 580 阅读 · 0 评论 -
ElementPlusError: [props] [API] type.text is about to be deprecated in version 3.0.0, 一个warning的解决
ElementPlusError: [props] [API] type.text is about to be deprecated in version 3.0.0, 一个warning的解决原创 2025-03-17 16:47:19 · 2065 阅读 · 0 评论 -
Vetur 与 Vue-Official 的区别
Vetur 与 Vue Offical 的区别原创 2025-03-03 09:40:47 · 3730 阅读 · 0 评论 -
ts 获取string字符串的最后一个字符的方法
ts 获取string字符串的最后一个字符的方法原创 2025-03-01 11:59:14 · 549 阅读 · 0 评论 -
vue cli 与 vite的区别
vue cli 与 vite的区别原创 2025-02-28 11:27:26 · 1527 阅读 · 0 评论 -
vue3 keep-alive模式下,@antv/x6 元素中引用自定义组件,通过列表到编辑页面的时候,如果同时打开多个编辑页面,则会发生数据错乱的问题的简单处理。
vue3 keep-alive模式下,@antv/x6 元素中引用自定义组件,通过列表到编辑页面的时候,如果同时打开多个编辑页面,则会发生数据错乱的问题的简单处理。原创 2025-02-19 16:30:53 · 482 阅读 · 0 评论 -
安装vue-vben-admin5.5.3(基于 Vue 3.0、Vite、TailwindCSS 和 TypeScript 等开发的中后台解决方案)的碰到的问题及相关解决方法
安装vue-vben-admin5.5.3(基于 Vue 3.0、Vite、TailwindCSS 和 TypeScript 等开发的中后台解决方案)的碰到的问题及相关解决方法原创 2025-02-14 11:40:38 · 1589 阅读 · 0 评论 -
TypeScript 中的 reduce计算统计之和
TypeScript 中的 reduce,计算长度之和原创 2025-02-11 16:02:05 · 459 阅读 · 0 评论 -
vscode script 中间的function import等关键字 先高亮,然后又灰了,并且按ctrl+/ 注释以html的形式,导致报错处理
4、最后检测了一下,发现都安装了,问题其实在插件的冲突,考虑一下之前安装的,删除一些不必要的插件,比如之前安装了其它的导致了冲突,删除了一些再次回到vscode发现已经正常。1、网上的很多文章对这个也有说明,但是每个人的环境不一样,就要去实际处理。7、最后,这次的问题在于插件冲突问题,只要删除一些不必要的就可以了。6、测试了下ctrl/command + / 注释也正常了。其实只要安装Vue3 Snippets应该就可以了。原创 2025-02-01 11:37:09 · 705 阅读 · 0 评论 -
css 如何将字体进行压扁,即水平缩放scaleX
css 通过scaleX将字体效果进行水平压扁,实现不同场景下的不同的字体效果。原创 2025-01-24 21:15:54 · 989 阅读 · 0 评论 -
vue3 Uncaught (in promise) TypeError: callback is not a function的解决方法
下拉框值改变时去触发@change方法,报Uncaught(inpromise)TypeError:callbackisnotafunction的解决原创 2025-01-19 10:39:09 · 661 阅读 · 0 评论 -
如何查看pad的console输出,以便我们更好的进行调试,查看并了解实际可能的问题。
利用android设备的开发者模式,启用USB调试模式,查看pad的console输出,以便我们更好的进行调试,查看并了解实际可能的问题。原创 2024-12-24 21:00:04 · 521 阅读 · 0 评论 -
Warning: FormItem can only collect one field item, you haved set `ASwitch`, `ARadioGroup` 2 field处理
Warning: FormItem can only collect one field item, you haved set `ASwitch`, `ARadioGroup` 2 field,You can set not need to be collected fields into `a-form-item-rest` 的简单处理方法实现。原创 2024-12-23 16:56:36 · 356 阅读 · 0 评论 -
antdv3.x Button+图片(svg) 实现圆角小图标
利用图片或者svg图标,作为Button的图标实现方式。原创 2024-12-18 11:32:59 · 611 阅读 · 0 评论 -
vscode 调试突然不起作用了,简单处理。
vscode断点调试失效以后,如何让其恢复可以调试状态。原创 2024-12-16 17:23:45 · 1739 阅读 · 0 评论 -
antv3 Radio,RadioGroup change的用法
如何使用Radio,Radio.Group实现单选操作,并且change事件,查看值的情况。原创 2024-12-14 15:58:31 · 789 阅读 · 0 评论
分享