- 博客(117)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue3 + ZLMRTCClient 实现 WebRTC 低延迟播放（ZLMediaKit）
ZLMediaKit（简称 ZLM）提供了 HTTP 接口做 WebRTC 信令交换，官方配套的浏览器 SDK 就是 ZLMRTCClient。本文基于 Vue3，说明如何用 ZLMRTCClient.Endpoint 实现一个可复用的 WebRTC 播放器。
2026-07-22 14:29:33
378
原创 Codex 最值得安装的 10 个插件：从 GitHub 到安全扫描，一篇装全
2026 Codex 插件必装清单：GitHub、Linear、Sentry、Codex Security 等 10 个官方+社区插件，覆盖协作、安全、文档、部署全流程。每个附安装命令和第一个 Prompt，新手可直接照装。
2026-07-06 12:17:18
343
原创 为什么 AI 写代码总爱过度设计？7 万 Star 的 Ponytail 用一张阶梯表解决了
这篇文章介绍了一个名为Ponytail的开源AI编程技能包，旨在解决AI代码生成中的过度设计问题。Ponytail通过7级决策阶梯（从功能必要性检查到使用原生功能），引导AI在写代码前优先考虑最简方案。实测显示，使用后代码量平均减少54%，且不牺牲安全性。Cursor用户只需复制配置文件即可启用该功能，让AI像资深开发者一样写出精简高效的代码。核心理念是"最好的代码是没写的那行"。
2026-07-03 13:36:09
342
原创 解决 Vue3 警告：Non-function value encountered for default slot
Vue3开发中，使用渲染函数时常见的"Non-function value encountered for default slot"警告是由于直接传递非函数值给自定义组件的插槽内容所致。Vue3推荐使用函数式插槽以优化性能。解决方案是将插槽内容包装为箭头函数：h('MyComponent', {}, {default: () => '内容'})。对于具名插槽或多层嵌套场景，同样需要保持函数式特性。该警告提醒开发者遵循Vue3的性能优化规范，确保所有传递给自定义组件的子节点都采用函数形式，既能消除警告又能提
2026-05-26 17:20:28
204
原创 MQTT vs WebSocket：一文看懂关键差异与实战选型
摘要： MQTT与WebSocket在实时应用中常被混淆，但二者本质不同：WebSocket是传输协议，提供双向通信通道；MQTT是应用层协议，基于发布/订阅模式，支持消息路由和QoS保障。关键差异包括通信模型（点对点vs发布/订阅）、消息路由、可靠性和适用场景（WebSocket适合Web即时通讯，MQTT适合IoT和大规模分发）。实际开发中可混合使用，如设备端用MQTT，Web端用MQTT over WebSocket。文章通过Python代码演示了两种协议的实现方式，帮助开发者根据场景做出技术选型。
2026-05-11 20:30:14
436
原创 前端虚拟列表（Virtual List）从原理到实战：海量数据渲染终极方案
前端虚拟列表技术摘要 虚拟列表是一种高效渲染海量数据的前端优化方案，通过仅渲染可视区域内的DOM元素来解决传统长列表渲染的性能问题。核心原理包括： 性能痛点：传统方式渲染1000+数据会导致卡顿、白屏甚至崩溃，原因是DOM过多引发重排重绘。 核心思想：只渲染可视区域内容，用少量DOM(几十个)模拟海量数据(数万条)，保持滚动流畅。 关键技术： 划分可视区、缓冲区和总高度区域 动态计算起始/结束索引 通过paddingTop实现位置偏移 固定高度实现更简单，动态高度需额外计算 实现优势： 恒定DOM数量保证性
2026-04-17 16:00:51
594
原创 Cookie、Session、Token傻傻分不清？看完这篇彻底通透！！！
摘要： Cookie、Session和Token（JWT）是Web开发中三种常见的身份验证机制。 Cookie：客户端存储的小数据，易被篡改，适合简单场景（如记住登录状态）。 Session：服务端存储用户数据，依赖Session ID（通常通过Cookie传递），安全性高但存在分布式共享问题。 Token（JWT）：自包含的加密凭证，无状态、适合跨域和分布式系统，但无法强制注销。 选型建议： 传统单体应用：Session + Cookie 前后端分离/微服务：JWT 高安全系统：混合模式（Token +
2026-03-30 10:29:45
768
1
原创 Vue 3 + TS 实战：手写 v-no-emoji 自定义指令，彻底禁止输入框表情符号！
本文介绍了如何使用Vue 3和TypeScript实现一个v-no-emoji自定义指令，禁止输入框输入Emoji表情。核心原理是通过正则表达式匹配Emoji的Unicode编码范围，在输入事件中实时过滤。指令支持动态开关，处理了光标位置等边界情况，确保与Vue的响应式系统同步。适用于昵称、表单等需要禁止表情的场景，避免数据库兼容性和UI布局问题。代码可直接用于生产环境，通过全局注册即可在项目中便捷使用。
2026-03-26 13:32:17
475
原创 2026 AI 开发新风向：Skills 安装量 Top 10 深度解析
2026年AI开发新风向：Skills安装量Top10榜单揭示了技术趋势。榜单显示"云原生+前端工程化"双核驱动，Vercel生态占据半壁江山，Microsoft Azure入围5席。前端类Skills如vercel-react-best-practices帮助开发者遵循最佳实践，Azure系列Skills则实现云运维自动化。这些垂直化Skills标志着AI编程从代码补全进化为领域专家，能解决架构、成本和合规等专业问题。开发者可通过VS Code界面或配置文件快速启用这些技能，将AI转变
2026-03-24 17:21:22
1282
原创 彻底搞懂 MCP (Model Context Protocol)，打破大模型“数据孤岛”！
🚀 MCP协议：AI生态的"USB-C"接口 MCP(Model Context Protocol)是新一代AI集成标准，由Anthropic主导开发，旨在解决大模型与外部系统间的"数据孤岛"问题。通过建立统一交互协议，MCP实现了： 架构革新 采用客户端-服务器模型 基于JSON-RPC 2.0通信 支持资源读取/提示词/工具调用三种核心交互模式 开发优势 模型方只需实现一次客户端 数据源只需开发标准服务端 支持Python/Node.js等主流语言开发 应用场景
2026-03-23 15:31:34
532
原创 Vue 3 核心辨析：ref vs reactive，90% 开发者都踩过的坑！
在 Vue 3 的响应式系统中，`ref` 和 `reactive` 是两座大山。很多开发者（包括老手）常常纠结：这个变量到底该用 ref 还是 reactive？选错了不仅会导致代码报错，还可能引发难以排查的响应式丢失问题。
2026-03-13 10:21:06
434
原创 Vue 3.4+ 新特性：defineModel 彻底革新组件双向绑定！
Vue 3.4 引入了革命性的 defineModel 宏，极大简化了组件双向绑定。传统方案需要繁琐的 props+emit 样板代码，而 defineModel 只需一行即可实现双向数据流，代码量减少70%。它支持多 v-model 绑定、类型安全(TypeScript)和修饰符处理，底层通过编译时转换为标准 props/emit 实现零运行时开销。使用时需注意 Vue 3.4+版本要求，避免解构返回的 ref，并合理处理自定义修饰符逻辑。这一特性显著提升了开发效率和代码可维护性，是 Vue 组件通信的重
2026-03-12 12:58:59
443
原创 RAG（检索增强生成）从原理到实战全解析
RAG（检索增强生成）技术解析：解决大模型幻觉问题的关键方案 本文系统介绍了RAG技术的原理与应用，该技术通过结合检索与生成两大模块，有效解决了大语言模型存在的知识滞后、幻觉问题和数据隐私三大痛点。文章详细剖析了RAG的核心架构，包含索引和查询两阶段工作流程，并重点讲解了文档切片、向量化等关键技术组件。通过Python+LangChain的实战演示，展示了如何构建企业级知识库问答系统。最后，文章对比了RAG与微调技术的差异，并提出了混合检索、查询重写等进阶优化方案，为开发高效可靠的智能问答系统提供了完整指南
2026-03-11 20:47:54
735
原创 UniApp 微信小程序分包加载实战！
UniApp 微信小程序分包加载指南：突破 2MB 限制的实用方案 摘要：本文详细讲解 UniApp 开发微信小程序时如何通过分包加载解决 2MB 代码包限制问题。主要内容包括：1) 分包的必要性（突破体积限制、提升启动速度）；2) UniApp 分包配置方法，通过 pages.json 配置 subPackages 字段；3) 实战步骤（页面迁移、路径修改、资源处理）；4) 进阶技巧（依赖共享、预加载）和常见问题解决方案。文章还提供了验证分包是否成功的检查方法，帮助开发者优化大型小程序项目。
2026-03-10 20:33:35
682
1
原创 后端动态路由 + RBAC 权限控制全实战（Vue3 + TS）
本文介绍了一种基于RBAC模型的后端动态路由权限控制方案，适用于Vue3+TS企业级中后台系统。传统前端静态过滤存在维护成本高、安全性低等问题，而通过后端动态返回路由表，可实现菜单级和按钮级的精细化权限控制。文章详细解析了RBAC的核心概念和优势，对比了前后端路由方案的差异，并提供了完整的实战代码示例，包括路由守卫拦截、动态路由注册及组件映射转换等关键实现。该方案符合大厂标准实践，能有效提升系统安全性和可维护性。
2026-03-10 16:19:44
570
原创 常规优化已用尽？小程序体积深层次优化实战！！！
如果已经完成了常规的代码压缩、图片优化和无用代码删除，但包体积依然超出限制（微信小程序主包限制通常为 2MB），说明项目已经进入了深水区优化。此时需要从架构层面和构建策略入手。
2026-03-08 14:40:51
571
原创 研发效率翻倍！Trae IDE 十大热门 Skill 深度推荐与实战指南
在 AI 编程助手爆发的今天，仅仅会“对话”已经不够了。如何让 AI 真正理解你的项目架构、自动执行复杂任务、甚至主动优化代码？Skill（技能） 是关键！本文基于 Trae IDE 官方推荐的研发场景十大热门 Skill，由作者 小马_xiaoen为你深度解析每个技能的核心用法、适用场景及实战案例，助你打造专属的超级开发助手！
2026-02-28 13:52:24
3523
1
原创 Aster Agent 开发必备：SKILL.md 高质量编写指南
Aster Agent技能开发指南：SKILL.md编写规范 本文详细介绍了Aster智能体框架中SKILL.md文件的核心作用和编写规范。SKILL.md作为连接用户意图与Agent执行能力的关键说明书，需要包含YAML元数据和Markdown正文两部分。元数据区包含name、description等必填字段，用于技能匹配；正文区则提供详细的操作步骤、错误处理和安全规范。文章强调SKILL.md是给Agent读的指令集而非人类文档，必须提供精确的工具调用示例和结构化流程。通过实战案例展示了完整技能文件的编
2026-02-27 15:46:04
1813
原创 2026年最火开源AI助手OpenClaw深度解析：本地运行、隐私优先、全能Agent！
在AI Agent爆发的2026年，一款名为OpenClaw的开源个人AI助手突然爆火。它不仅能聊天，更能主动执行系统任务——整理文件、处理邮件、编写代码、操作浏览器……所有数据完全本地运行，隐私安全无忧。本文将带你全面了解OpenClaw的核心功能、架构设计、部署指南及实战案例，助你打造专属的私人AI助理！
2026-02-26 16:20:16
5470
原创 AI Prompt 工程完全指南：从入门到精通的提示词设计艺术
《AI Prompt工程指南：提示词设计核心技巧》摘要： Prompt（提示词）是人与AI模型沟通的关键桥梁，其质量直接影响输出效果。本文系统讲解Prompt设计的核心原则与实战技巧： 五大设计原则： 明确具体：避免模糊表述，拆解任务细节 结构化：按"目标→背景→约束→格式"组织指令 提供上下文：补充必要背景信息和数据 设定角色：让AI代入特定身份提升输出专业性 迭代优化：根据反馈持续调整Prompt 典型场景技巧： 代码生成：明确技术栈、功能点和代码规范 文案写作：定义风格语气和结构框
2026-02-25 09:45:57
1427
原创 豆包对话目录插件：提升AI对话效率的利器！！！
豆包对话目录插件是一款提升AI对话效率的浏览器扩展工具，专为解决长对话难以定位、页面操作低效等问题而设计。该插件核心功能包括实时生成对话目录、快速定位高亮内容、可拖动浮悬框、智能内容更新和性能优化。采用TypeScript和Plasmo框架开发，通过豆包特定的data-testid选择器精准提取消息，并运用节流技术确保流畅体验。适用于长对话管理、项目文档整理、学习资料复习等多种场景，支持快捷键操作，适配不同设备。性能测试显示即使在200条消息的长对话中仍保持良好表现。插件采用MIT许可证，欢迎社区贡献和反馈
2026-02-05 14:46:58
1094
原创 Proxy 与 Reflect 从入门到实战：ES6 元编程核心特性详解
本文深入解析ES6元编程核心特性Proxy与Reflect： 核心概念：Proxy作为对象拦截器，可创建目标对象的代理并拦截底层操作；Reflect则封装原生对象操作，与Proxy方法一一对应，二者配合实现优雅的元编程。 关键特性： Proxy提供13种拦截方法，覆盖对象所有常用操作 非侵入式设计，不影响目标对象本身 Reflect统一原生操作，提供更规范的返回值处理 实战示例： 属性读取拦截（默认值处理） 属性赋值拦截（类型校验） 数组操作日志记录 函数调用增强 Proxy+Reflect组合为JavaS
2026-02-05 10:04:51
787
原创 Promise 从入门到精通：彻底解决前端异步回调问题！！！
Promise是ES6引入的异步编程解决方案，通过封装异步操作解决回调地狱问题。它具有状态不可逆、链式调用、统一错误处理等特性，将异步代码转为线性结构。Promise有三种状态（pending/fulfilled/rejected），通过resolve/reject触发状态转换。核心方法.then()、.catch()、.finally()支持链式调用，使异步流程更清晰。相比传统回调，Promise提供了更优雅的异步管理方式，是async/await的基础。掌握Promise对现代前端开发至关重要。
2026-02-04 15:06:58
662
原创 IndexedDB 从入门到实战：前端本地大容量存储解决方案。
IndexedDB是浏览器提供的大容量本地NoSQL数据库，支持存储结构化数据（对象/数组），容量可达数GB级别。核心特性包括异步操作、事务支持、索引优化和持久化存储，适合前端离线应用和数据缓存场景。与传统存储方案（LocalStorage、Cookie）相比，IndexedDB具有更大容量、更丰富功能和更优性能。其核心概念包括数据库、对象仓库、主键、索引和事务，操作流程需通过事务执行增删改查。原生API基于回调机制，可封装为Promise简化使用。IndexedDB是解决前端大容量本地存储需求的理想方案。
2026-02-02 14:22:37
738
原创 前端大文件上传全解析：从基础到高级，循序渐进掌握核心实现（附带实战案例）
本文介绍了大文件上传的完整解决方案，针对传统上传方式存在的问题（如请求超时、易中断、无进度反馈等），提出分片上传的核心思路。通过将大文件拆分为固定大小的小分片，分批次上传并最终合并，实现了更可靠的大文件传输。文章包含基础分片上传的实现原理、关键API（File.slice()）使用方法，以及完整的前后端可运行案例代码（原生JS+Node.js/Express）。该方案支持进度显示、断点续传等高级功能，有效解决了大文件上传的痛点问题。
2026-01-30 10:07:40
1000
原创 深拷贝VS浅拷贝：从原理到手写实现，新手也能看懂的保姆级教程！！！
本文深入讲解JavaScript中的深拷贝与浅拷贝区别，从原理到实践循序渐进。浅拷贝仅复制第一层数据，深层引用仍共享内存；深拷贝递归复制所有层级，实现完全独立的对象。文章提供原生浅拷贝方法（Object.assign、扩展运算符等）和手写实现，并逐步完善深拷贝函数：从基础递归版→处理循环引用→支持特殊类型（正则、日期等）。通过代码示例和对比表格，帮助开发者彻底理解拷贝机制，避免常见BUG。最后给出可直接用于生产环境的完整深拷贝实现方案。
2026-01-29 14:18:34
743
原创 Vue3 + TS 实现长按指令 v-longPress：优雅解决移动端/PC端长按交互需求
本文介绍了如何在Vue3+TypeScript中实现一个功能完善的长按指令v-longPress。该指令支持跨端兼容（PC端鼠标长按和移动端触摸长按），提供自定义配置选项（时长、回调函数、移动阈值等），并进行了防误触优化。实现方案包含完整的类型定义，自动清理定时器和事件监听，防止内存泄漏。核心功能包括： 支持动态更新指令参数 阻止默认行为和事件冒泡 通过计算移动距离实现防误触 完善的错误处理和状态管理 提供默认配置和类型安全接口 该指令可直接应用于业务场景，如移动端删除操作、PC端右键菜单等长按交互需求。
2026-01-29 09:34:22
986
原创 WebSocket与SSE深度对比与实战 Demo
WebSocket与SSE深度对比：实时通信技术选型指南 本文全面对比了WebSocket和SSE两种实时通信技术。WebSocket是基于TCP的全双工协议，支持双向实时通信，适用于聊天应用等场景；SSE是基于HTTP的单向推送技术，适用于服务器主动推送数据的场景。文章从核心概念、技术差异、代码实现三个维度进行深入分析，并提供了完整的Demo实现。关键差异包括：WebSocket支持双向通信和二进制数据但开发复杂，SSE仅支持单向文本推送但实现简单。开发者在选型时需根据业务需求（如通信方向、数据类型、开发
2026-01-28 10:26:21
822
原创 Vue3 + TS 实现一键复制指令 v-copy（优雅解决文本复制需求）
在前端开发中，“一键复制”是高频使用的交互功能（如复制链接、订单号、邀请码等）。本文将教你基于 Vue3 + TypeScript 实现一个**功能完善、体验友好、类型安全**的 `v-copy` 自定义指令，支持自定义复制内容、复制成功/失败回调、复制提示等特性，开箱即用。
2026-01-27 10:14:20
822
原创 Vue3 + TS 实现防抖指令 v-debounce（优雅解决高频触发问题）
Vue3+TS防抖指令实现 摘要：本文介绍了基于Vue3和TypeScript实现通用防抖指令v-debounce的方法。该指令具有以下特性： 支持自定义防抖延迟时间（默认500ms） 可配置是否立即执行 可绑定任意事件类型（默认click） 完善的TS类型定义 自动清理定时器和事件监听 实现核心包括： 防抖函数封装 指令生命周期管理 参数动态更新处理 资源清理机制 使用方式灵活，既可简单传递回调函数，也可通过配置对象实现复杂需求。适用于按钮防重复点击、输入框防频繁请求等场景，有效优化前端性能。
2026-01-26 10:20:05
1304
原创 Vue3 + TypeScript 实现高性能图片懒加载v-LazyLoad指令（开箱即用）
本文介绍了一个生产级别的 Vue3 图片懒加载指令实现方案。该方案基于 IntersectionObserver API 开发，具备以下核心特性： 性能优异，支持自定义占位图和错误图 内置智能重试机制（采用指数退避策略） 完善的加载状态管理（pending/loading/loaded/error） 全 TypeScript 开发，类型定义完整 支持多种配置方式（字符串或对象） 自动清理资源，避免内存泄漏 实现包含全局观察器缓存、跨域支持、样式控制等优化细节，可直接用于生产环境，显著提升图片加载性能。
2026-01-21 11:38:49
991
原创 Vue3 自定义拖拽指令封装：高性能、高扩展性的拖拽实现方案（v-draggable实现）
Vue3自定义拖拽指令封装 本文介绍了一个高性能、高扩展性的Vue3拖拽指令实现方案v-draggable，具有以下核心特性： 多功能支持：提供手柄拖拽、边界限制、轴向锁定、网格吸附等实用功能 性能优化：通过节流控制、事件清理等机制确保流畅体验 灵活配置：支持动态参数更新和完整生命周期回调 样式控制：自动添加拖拽类名和层级，便于样式定制 边界处理：智能计算容器边界，防止拖拽越界 该指令采用TypeScript编写，代码结构清晰，通过自定义指令方式实现，可轻松集成到Vue3项目中，适用于弹窗、面板、布局等多种
2026-01-16 16:04:12
1094
原创 Vue3 实现超丝滑打字机效果组件 - 进阶
本文介绍了一个基于Vue3开发的打字机效果组件，具有高性能和高定制化特点。该组件支持打字/删除循环、光标闪烁、自定义样式等功能，无需第三方依赖。核心特性包括：可调节的打字/删除速度、循环延迟设置、光标显示控制、自动清理定时器避免内存泄漏。组件采用Composition API编写，提供了完整的Props校验和响应式状态管理，并暴露控制方法供外部调用。适用于AI聊天、个性介绍页等需要打字机效果的场景，代码结构清晰易于扩展。
2026-01-12 11:45:14
1086
原创 Leaflet随着地图的缩放 Marker位置发生变化与实际位置偏移
在使用 Leaflet 时，确保 marker 随地图缩放保持正确位置是一个常见需求。通过设置 iconAnchor 和使用经纬度坐标而非像素值，可以实现这一功能。
2026-01-06 14:06:03
462
原创 Vue3项目中嵌入Dify（网站嵌入）
本文介绍了两种将Dify聊天应用嵌入网站的方法：1）使用iframe方式，只需获取应用令牌并添加iframe代码到网页；2）在Vue3中集成聊天气泡按钮，需配置token、baseUrl等参数，并动态加载脚本。两种方法都需注意URL是否包含端口号及协议类型（HTTP/HTTPS）。文中提供了完整的代码示例和配置说明，包括可选参数如拖动设置、容器样式等。效果图展示了最终实现的聊天气泡界面。
2025-12-04 14:26:12
1756
4
原创 Echarts，tooltip悬浮框无法显示、legend无操作效果并报错Cannot read properties of undefined (reading ‘type‘)
摘要：在Vue3中使用ECharts时，应避免直接使用ref响应式对象，而应选择shallowRef或markRaw。因为ECharts实例这类复杂第三方库对象若被深度响应式处理会严重影响性能。通过markRaw可以标记对象使其不被响应式代理，shallowRef则只对.value的变化作出响应。文中给出了ECharts图表初始化示例，使用markRaw包装echarts实例，并详细展示了图表配置选项和窗口大小变化的响应处理。
2025-08-14 09:47:39
293
原创 解决 Leaflet 地图在 Flex 布局中加载不全的问题
摘要：Flex布局下Leaflet地图加载不全问题源于Flex容器的动态特性与Leaflet尺寸检测机制的冲突。主要原因是Flex子元素默认收缩(flex-shrink:1)和高度拉伸(align-items:stretch)，而Leaflet需要明确的容器尺寸。解决方案包括：1)为地图容器设置固定高度并禁用收缩(flex-shrink:0)；2)使用map.invalidateSize()在布局稳定后强制重绘；3)改用绝对定位或CSS Grid布局。最佳实践是始终明确地图容器尺寸，并在窗口resize时触
2025-08-06 13:41:21
545
原创 Node.js 版本管理工具对比：nvm、n、volta
本文对比了三种主流Node.js版本管理工具：nvm、n和volta。nvm提供严格的版本隔离，适合多项目开发；n操作简单但全局依赖可能冲突；volta支持自动切换和工具链管理，适合团队协作。对比显示：nvm隔离性最强但跨平台支持较弱；n最简单易用但功能有限；volta功能全面但学习成本较高。推荐个人开发者选择n或nvm，团队项目使用volta。注意避免同时安装多个工具以免冲突。
2025-06-25 08:49:14
1423
原创 阿里前端开发规范
《阿里前端开发规范》是一套由阿里巴巴集团前端团队整理并实践的编码指南。这份规范涵盖了HTML、CSS、JavaScript等前端技术领域的最佳实践，旨在提升代码质量，优化开发流程，确保项目的可维护性和一致性。遵循这些规则，无论你是初入职场的新手还是经验丰富的资深开发者，都能够编写出更加清晰、高效且易于团队协作的代码。
2025-01-22 15:37:46
1157
2-eclipse.exe
2020-07-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人