慧一居士-CSDN博客

原创 Nitro 和nuxt4框架关系

你不需要单独安装 Nitro，它已经内置在 Nuxt 4 中了。当你运行nuxt dev或nuxt build时，Nitro 就在后台默默工作，处理服务端渲染和 API 请求。Nitro 也可以脱离 Nuxt 独立存在，作为一个轻量级的 Node.js 框架使用（例如配合 React 或 SolidJS 的 Vite 项目），但在 Nuxt 生态中，它是不可或缺的心脏。

2026-04-02 15:02:07 175

原创 CSS中 ::deep 作用，使用场景，使用方法介绍

:deep 是 Vue 中 scoped 样式的一个穿透语法，它的核心作用是：强制让父组件的样式穿透子组件的根节点或内部元素，从而覆盖子组件或第三方 UI 库的样式。注意：早期 Vue 2 中使用的 /deep/ 或 >>> 已被废弃，统一使用 ::deep。如果你在使用 scss 等预处理器，写法不变。如果项目未使用 scoped，则不需要 ::deep，直接编写全局样式即可覆盖。

2026-04-02 10:48:02 181

原创 Vue项目中，子组件调用父组件方法示例，以及如何传值示例，对比使用插槽和不使用插槽区别

*优先使用 **$emit实现子 → 父通信（符合 Vue 单向数据流理念）。当子组件是“UI 容器”（如弹窗、卡片、布局），且内容/行为高度可变时，强烈推荐使用插槽。避免滥用props传函数，除非你明确需要类似 React 的回调模式（如高阶组件）。不要用$refs调用父方法（反模式，破坏封装性）。

2026-04-02 07:49:04 153

原创 Vue项目中，何时使用布局、子组件嵌套、插槽对应的使用场景，和完整的使用示例

在 Vue 项目中，布局（Layout）、子组件嵌套和插槽（Slot）是构建复杂用户界面的三种核心技术。它们解决的问题不同，但常常协同工作。下面将详细阐述它们各自的使用场景和完整示例。

2026-04-02 07:13:23 289

原创 pinia-plugin-persistedstate 在nuxt4项目中服务端渲染，不能使用window对象原因

在 Nuxt 4（以及 Nuxt 3）项目中，window。这是因为 Nuxt 的 SSR 机制会在服务器（Node.js 环境）中先执行一次 Vue 应用代码来生成 HTML。在服务器环境中，不存在浏览器特有的windowdocument等对象。如果代码在服务端执行时尝试访问window，就会报错。针对。

2026-04-01 11:04:55 208

原创 Nuxt4 项目的约定配置都有哪些，哪些可以自动实现, 详细示例和使用说明

Nuxt 4 的核心哲学是“约定优于配置”，它通过预设的目录结构和命名规则，自动实现许多功能，让开发者无需编写繁琐的配置代码即可快速构建应用。以下是 Nuxt 4 项目中主要的约定配置及其自动实现的功能详解。

2026-03-31 21:22:48 475

原创 nuxt3 项目和nuxt4 项目区别和对比

Nuxt 4 并非一次颠覆性的重写，而是在 Nuxt 3 成熟架构上的深度打磨与优化。它专注于提升长期稳定性、开发性能和代码组织性，为开发者带来更流畅、更可靠的开发体验。总的来说，你可以将 Nuxt 4 视为 Nuxt 3 的一个更完善、更强大的版本。

2026-03-28 15:03:45 202

原创 Zod 功能、使用场景介绍以及对应场景使用示例

问题：标准验证规则无法满足业务需求// 自定义验证：密码强度检查message: '密码长度至少8位',});if (!message: '密码必须包含大写字母',});if (!message: '密码必须包含数字',});if (!/[!message: '密码必须包含特殊字符',});});// 自定义验证：身份证号格式'无效的身份证号格式'// 组合使用});

2026-03-25 18:18:56 372

原创 Vue项目中使用的首选的依赖库如VueUse等，使用场景和使用示例介绍

在2026年构建一个新的Vue项目，典型的},核心组合策略逻辑复用：首选VueUse。状态管理：首选Pinia。UI呈现：根据团队审美选或Naive UI。数据校验：首选Zod。网络请求Axios或Ofetch。这些库共同构成了一个类型安全、高性能且易于维护的现代Vue开发体验。

2026-03-25 17:24:45 393

原创 VueUse 功能介绍使用场景及完整使用示例

VueUse 是 Vue 3 开发的瑞士军刀。它极大地减少了样板代码，让开发者能专注于业务逻辑本身。无论是简单的“复制文本”、“深色模式”，还是复杂的“手势识别”、“虚拟列表”，VueUse 都能提供成熟、稳定且高性能的解决方案。对于任何 Vue 3 项目，它都是首选的依赖库之一。官方文档地址：https://vueuse.org/ (支持中文)

2026-03-25 14:23:24 438

原创 TanStack功能介绍和使用场景，对应 vue,react 完整使用示例

TanStack是一个专注于构建无头（Headless）类型安全且框架无关的工具库集合。它的前身是著名的团队，现已发展成为一个支持等多前端框架的生态系统。其核心理念是：“学会一次，到处复用”。你只需要掌握一套 API 逻辑，就可以在任何支持的框架中使用，极大地降低了跨框架开发的学习成本和迁移成本。TanStack 的最大优势在于统一性。一旦你理解了queryKey的概念或useTable的配置项，你就可以在 React、Vue 甚至 Solid 项目中无缝切换，无需重新学习新的 API。

2026-03-25 11:53:20 347

原创 Trae的ide和solo模式区别，使用场景对比

选 IDE 模式，如果你正在维护大型项目需要精确控制代码逻辑习惯传统开发流程，只需 AI 提效选 SOLO 模式，如果你想快速验证想法或搭建原型负责端到端测试或全流程自动化希望减少重复性工程劳动（如环境配置、报告生成）是非专业开发者（如产品、测试）但需产出可运行软件💡最佳实践：两者可自由切换。例如：用 SOLO 生成初版代码 → 切换到 IDE 模式进行精细调优 → 再用 SOLO 执行回归测试。

2026-03-24 19:17:55 1519

原创 Google的libphonenumber 号码检查归属地如何使用（java 实现）

在 Java 中使用 Google 的库检查电话号码归属地，主要依赖其子模块geocoder。该功能可以离线将电话号码解析为具体的地区描述（如“中国北京”、“美国加利福尼亚州”等）。

2026-03-24 14:29:39 411

原创 springboot 项目集成 seate 分布式事务TCC使用nacos完整配置步骤及说明

Seata Server 注册到 NacosSpring Boot 客户端通过 Nacos 发现 Seata使用 TCC 模式实现分布式事务全局事务由自动管理💡 TCC 模式适合对一致性要求高、业务逻辑清晰的场景（如支付、库存）。若追求简单，可考虑 AT 模式（需 undo_log 表）。如需完整示例代码，可参考 GitHub：seata-samples/tcc-sample。

2026-03-20 14:13:16 338

原创 springboot 项目集成 seate 分布式事务AT模式使用nacos完整配置步骤及说明

通过以上步骤，你已成功在 Spring Boot 项目中集成Seata AT 模式 + Nacos，实现强一致的分布式事务。Seata Server 用 Nacos 注册 & 配置客户端手动代理 DataSource每个业务库建 undo_log 表**TM 用 @GlobalTransactional，RM 用普通 **📌 完整项目结构建议参考官方示例或 GitHub 开源项目（如如需进一步优化（如高可用 TC 集群、多命名空间隔离等），可在此基础上扩展。

2026-03-20 14:12:14 494

原创 ZooKeeper集群搭建

搭建 ZooKeeper 集群是构建高可用分布式系统（如 Kafka、Hadoop HHA、Dubbo 等）的关键步骤。ZooKeeper 集群通常采用部署（如 3 台、5 台），以容忍(n-1)/2台机器故障。以下是基于最新稳定版本（如 3.8.x 或 3.9.x）的。

2026-03-16 09:41:28 361

原创 Nacos 集群搭建

搭建 Nacos 集群是确保微服务架构中高可用性和稳定性的关键步骤。Nacos 集群通常采用（基于 Raft 协议）部署，并配合外部数据库（MySQL）进行配置持久化。以下是基于最新实践（2025-2026年主流版本，如 Nacos 2.x）的完整搭建指南，涵盖四个阶段。

2026-03-12 17:47:54 260

原创图床和OSS 存储和使用场景对比

如果你只是写写博客、记笔记，不想花钱也不想折腾技术：找一个口碑好的免费/廉价图床（注意数据备份）。如果你是开发者、企业用户，或者对数据安全性、长期稳定性有要求：请务必选择OSS（搭配 CDN）。虽然初期配置稍麻烦（约 30 分钟），但一劳永逸，且长期成本可控，数据掌握在自己手中。

2026-03-09 13:09:37 399

原创 Lsky Pro 图床安装和使用完整示例

Lsky Pro（兰空图床）是一款基于 PHP 和 Laravel 框架开发的开源私有图床程序，支持 Docker 部署和传统 LNMP/LAMP 环境部署。以下是基于最新资料整理的。

2026-03-09 11:56:20 473

原创开源图床系统有哪些

开源图床系统是指允许用户自行部署、管理和存储图片的开源软件解决方案。与使用第三方公共图床相比，自建开源图床具有等优势。

2026-03-09 11:54:03 575

原创 CSS 媒体查询功能介绍和实战使用完整示例

CSS 媒体查询是让网页“适应”各种设备的关键。理解min-width(移动优先) 和max-width(桌面优先) 的区别。始终包含标签。结合 Flexbox 或 Grid 布局系统使用，效果最佳。通过上述示例，你可以看到一个页面如何从手机的单列流式布局，平滑过渡到平板的双列布局，最后变为桌面的三列复杂布局。

2026-02-28 18:16:51 1031

原创 tsconfig.json、tsconfig.node.json、tsconfig.app.json 使用配置介绍和完整实战使用示例

配置项是否必须用途✅ 推荐项目入口，管理多配置✅ 前端项目必需浏览器环境代码编译✅ 含构建脚本时必需Node 环境工具链支持避免类型污染提升 IDE 智能提示准确性支持更复杂的 monorepo 或全栈架构与现代构建工具（Vite、esbuild、Rollup）完美协作这种模式已成为 2025–2026 年 TypeScript 前端工程化的标准实践，强烈建议在新项目中采用。

2026-02-26 20:02:04 472

原创 Vue项目使用TS完整配置说明和使用实战示例

如果安装库（如）后报错方案 A：查看是否有单独的 types 包 (如) 并安装。方案 B：在或新建中声明：(注：尽量使用原生支持 TS 的库，避免使用any。

2026-02-26 17:34:28 610

原创 SVG 、Symbol 、JSX 格式区别对比

项目全称类型说明SVG图像格式 / XML 标记语言用于描述二维矢量图形的开放标准，基于 XML，可缩放不失真SymbolSVG<symbol>元素 / ES6 Symbol多重含义：1. SVG 中的可复用图形片段2. JavaScript 中的唯一标识符在 SVG 中用于定义可复用的图形模板；在 JS 中是一种原始数据类型JSX语法扩展React 中使用的语法糖，允许在 JavaScript 中写类似 HTML 的结构Symbol。

2026-02-26 13:59:09 235

原创 Vue3 + Vite 项目使用Iconify图标库配置使用步骤

特性推荐方案 (+ 组件化)传统方案 (<Icon>性能⭐⭐⭐⭐⭐ (Tree-shaking, 无运行时开销)⭐⭐⭐ (可能需要运行时加载或全量引入)离线支持✅ 完美支持 (构建时编译)⚠️ 需额外配置本地数据类型提示✅ 优秀 (基于文件系统)✅ 良好使用便捷性✅ 高 (尤其配合自动导入)✅ 高 (适合动态场景)适用场景绝大多数静态图标需求图标名完全动态未知的场景按照上述步骤 1-3 (方式 A)配置，即可获得最佳的开发体验和性能。

2026-02-26 13:39:29 508

原创 iconify图标库功能和使用介绍

icons: {'logo': {body: '<path d="..." fill="currentColor"/>' // SVG path 内容},width: 24,height: 24});// 使用：<Icon icon="my-custom:logo" />Iconify 是目前前端开发中最灵活、性能最优的图标解决方案之一。它解决了传统图标字体加载慢、样式难定制的问题，同时通过统一的 API 屏蔽了不同图标库的差异。

2026-02-26 11:13:55 591

原创 iconify 图标和字体图标区别对比

维度胜出方性能🏆Iconify灵活性🏆Iconify图标丰富度🏆Iconify多色支持🏆Iconify旧浏览器兼容⚖️ 平手（均可降级）简单项目上手速度🏆 字体图标（若已熟悉）✅趋势：随着 SVG 成为 Web 标准且浏览器支持完善，Iconify 代表的 SVG 图标方案正逐步取代传统字体图标，尤其在注重性能与现代用户体验的项目中。

2026-02-26 10:51:40 390

原创 SVG图片介绍和使用

特性优势劣势清晰度任意缩放不失真不适合表现照片级真实感的复杂图像（如风景照）性能简单图形文件极小极其复杂的矢量图（如详细地图）可能导致渲染卡顿，DOM 节点过多编辑性代码可编辑，易于版本控制手动编写复杂图形困难，通常需借助设计软件（Illustrator, Figma, Sketch）导出兼容性现代浏览器完美支持IE8 及以下不支持（现已基本无此顾虑）

2026-02-25 18:14:09 679

原创 Vite 进阶常用插件详解与使用指南

这部分插件主要关注以及。以下是这 5 个插件的详细用法和配置示例。

2026-02-25 17:36:17 498

原创 Vite 常用插件详解与使用指南

解析 Vue 3 单文件组件（SFC），是 Vue 3 + Vite 项目的核心插件。：将 SVG 文件打包成 sprite 图标，支持按需加载，减少 HTTP 请求。：自动导入 Vue/React API 和自定义函数，无需手动 import。：构建时生成 .gz 或 .br 压缩文件，减少传输体积，提升加载速度。：为 React 项目提供快速刷新（HMR）和 JSX 支持。：自动注册 Vue 组件，无需手动 import 和注册。希望这份指南对您有帮助！

2026-02-24 17:35:48 479

原创 vite 使用说明和示例演示

（法语意为"快速"，发音 /vit/）是由 Vue.js 作者尤雨溪开发的新一代前端构建工具。它利用浏览器原生的实现了极速冷启动和即时热更新，特别适合 Vue、React 等现代框架项目。

2026-02-24 14:43:28 329

原创 ESM 在前端开发中的介绍和使用指导

优势说明🎯标准化官方规范，跨平台统一🚀性能优化静态分析支持树摇📦代码组织清晰的依赖关系🔒安全性严格模式，作用域隔离🌐浏览器原生无需额外工具即可使用2026 年建议✅ 新项目直接使用 ESM✅ 构建工具优先选择 Vite✅ 发布 npm 包推荐纯 ESM⚠️ 老项目逐步迁移，注意兼容性ESM 已成为现代前端开发的标准配置，掌握 ESM 是前端开发者的必备技能！

2026-02-24 11:42:50 1025

原创显卡和GPU的关系，区别对比

GPU是显卡的核心部件，没有GPU就没有显卡显卡是GPU的载体，提供供电、散热、输出等支持日常口语中常混用，但技术上是部分与整体的关系。

2026-02-24 10:43:47 615

原创 AI 芯片和显卡的区别对比

项目AI芯片显卡(GPU)全称人工智能专用芯片图形处理器(Graphics Processing Unit)设计目的专为AI计算任务优化最初为图形渲染设计，后扩展至通用计算代表产品华为昇腾、谷歌TPU、寒武纪、英伟达H100/A100英伟达GeForce/Quadro、AMD Radeon、Intel Arc。

2026-02-24 10:38:21 1403

原创 nuxtjs和nextjs区别对比

你的情况推荐团队熟悉 Vue，追求快速交付Nuxt.js团队熟悉 React，需要极致性能与扩展性Next.js项目需要强 SEO + 静态内容两者均可，Nuxt 略优项目含大量动态交互 + 实时数据Next.js希望部署到多种云平台Nuxt.js（Nitro 引擎通用性更强）🎯核心原则不要为了框架而换技术栈。选择与团队技能匹配、能快速落地的方案，才是工程最优解。

2026-02-14 07:24:46 1121