https://www.whbbit.cn 月空人 2025-04-08T06:14:56.840Z 月空人的个人博客,分享技术与生活。“求则得之,舍则失之,是求有益于得也,求在我者也。求之有道,得之有命,是求无益于得也,求在外者也。”。月空是一名开源爱好者,结识了许多志同道合的朋友。这个博客记录了他在生活和技术学习中的点滴经历,充满启发与思考。网站界面简洁美观,内容丰富实用,人气互动活跃,涵盖了编程、生活、学习等多个领域,一些内容能给您好的阅读体验。 月空人 whbbit@qq.com https://www.whbbit.cn/ zh-Hans Zhilu Blog https://7.isyangs.cn/78/6795a3b5015e1-78.webp https://7.isyangs.cn/78/6795a3b5015e1-78.webp © 2025 月空人 偶尔写些博客,发发牢骚 https://www.whbbit.cn/2025/atomic-design-vue-or-nuxt 翻译:Vue 和 Nuxt 中的 Atomic Design 月空人

清晰的写作需要清晰的思考。对于编码也是有效的。启动个人项目时,将所有组件扔入一个文件夹中可能会起作用。但是随着项目的增长,尤其是在较大的团队中,这种方法会导致问题:

点击查看全文]]>
清晰的写作需要清晰的思考。对于编码也是有效的。启动个人项目时,将所有组件扔入一个文件夹中可能会起作用。但是随着项目的增长,尤其是在较大的团队中,这种方法会导致问题: 2025-02-14T07:43:50.000Z
https://www.whbbit.cn/2025/building-a-pinia-plugin-for-cross-tab-state-syncing 翻译:构建 Pinia 插件进行跨标签页状态同步 月空人

创建一个 Pinia 插件,使用 BroadcastChannel API 实现跨浏览器选项卡的状态同步。该插件允许您标记特定存储以进行跨 Tab 同步,并通过基于时间戳的冲突解决自动处理状态更新。

点击查看全文]]>
创建一个 Pinia 插件,使用 BroadcastChannel API 实现跨浏览器选项卡的状态同步。该插件允许您标记特定存储以进行跨 Tab 同步,并通过基于时间戳的冲突解决自动处理状态更新。 2025-02-14T03:32:59.000Z
https://www.whbbit.cn/2025/drizzle.orm-use Drizzle ORM 使用 月空人

虽然 Drizzle ORM 还没有到 1.0,但是凭借其出色的性能,已经得到了不少的关注了。在它官网的基准测试里,比现在很火的 Prisma 快了好多。我们一起来看一下这个库如何使用吧!

点击查看全文]]>
虽然 Drizzle ORM 还没有到 1.0,但是凭借其出色的性能,已经得到了不少的关注了。在它官网的基准测试里,比现在很火的 Prisma 快了好多。我们一起来看一下这个库如何使用吧! 2025-02-12T02:35:29.000Z
https://www.whbbit.cn/2025/how-to-structure-vue-projects 翻译:如何选择 Vue 项目架构 月空人

这篇文章涵盖了适合不同项目规模的各种 Vue 项目结构

点击查看全文]]>
这篇文章涵盖了适合不同项目规模的各种 Vue 项目结构 2025-02-14T06:18:31.000Z
https://www.whbbit.cn/2025/zod-use Zod 基础用法 2025-03-15T10:10:39.000Z 月空人

本文简单讨论一下 Zod 在项目中的实际使用

点击查看全文]]>
本文简单讨论一下 Zod 在项目中的实际使用 2025-03-15T10:10:39.000Z
https://www.whbbit.cn/2025/how-to-do-visual-regression-testing-in-vue-with-vitest 翻译:如何使用 Vitest 在 Vue 中进行视觉回归测试? 2025-03-02T02:10:47.000Z 月空人 在本指南中,您将学习如何使用 Vitest 为 Vue 组件设置视觉回归测试。

点击查看全文]]>
在本指南中,您将学习如何使用 Vitest 为 Vue 组件设置视觉回归测试。 2025-03-02T02:10:47.000Z
https://www.whbbit.cn/2025/how-to-test-vue-router-components-with-testing-library-and-vitest 翻译:如何使用测试库和 Vitest 测试 Vue Router 组件 2025-03-02T01:45:11.000Z 月空人 本指南将向你展示如何使用真实的路由集成来测试 Vue Router 组件,并使用 mock 进行隔离组件测试。您将学习验证路由-链路交互、编程导航和导航守卫处理。

点击查看全文]]>
本指南将向你展示如何使用真实的路由集成来测试 Vue Router 组件,并使用 mock 进行隔离组件测试。您将学习验证路由-链路交互、编程导航和导航守卫处理。 2025-03-02T01:45:11.000Z
https://www.whbbit.cn/2025/recent-summary 近日小结【随机犯病篇】 2025-02-25T04:37:18.000Z 月空人

25 年回北京记

点击查看全文]]>
25 年回北京记 2025-02-19T04:37:18.000Z
https://www.whbbit.cn/2025/learn-site 编程学习网站 2025-02-24T07:43:24.000Z 月空人

一些前端需要的技能学习网站

点击查看全文]]>
一些前端需要的技能学习网站 2025-02-24T07:43:24.000Z
https://www.whbbit.cn/2025/how-to-optimize-performance-in-vue-apps 翻译:如何优化 Vue 应用性能 2025-02-05T07:53:41.000Z 月空人

Vue 旨在高效处理大多数典型用例,无需大量手动调整。但有时,您会遇到需要更多微调的情况。在本文中,我们将探讨优化 Vue 应用程序性能时需要注意的关键事项。

点击查看全文]]>
Vue 旨在高效处理大多数典型用例,无需大量手动调整。但有时,您会遇到需要更多微调的情况。在本文中,我们将探讨优化 Vue 应用程序性能时需要注意的关键事项。 2025-02-05T07:53:41.000Z
https://www.whbbit.cn/2025/checking-if-a-slot-is-empty-in-vue 翻译:Vue 检查 slot 是否为空 2025-02-05T07:29:37.000Z 月空人

在我的 Vue 项目中,我最近需要检查一个插槽是否为空。这个用例是一个可以接受一些内容的插槽的组件,但它也可以在没有它的情况下工作。为此,我查阅了 Vue 文档并自己进行了一些实验,看看是否能让它工作,结果令我非常惊喜,这又是 Vue 框架内置的另一个非常有用的功能。

点击查看全文]]>
在我的 Vue 项目中,我最近需要检查一个插槽是否为空。这个用例是一个可以接受一些内容的插槽的组件,但它也可以在没有它的情况下工作。为此,我查阅了 Vue 文档并自己进行了一些实验,看看是否能让它工作,结果令我非常惊喜,这又是 Vue 框架内置的另一个非常有用的功能。 2025-02-05T07:29:37.000Z
https://www.whbbit.cn/2024/algorithm-traversal 二叉树 2025-02-04T07:19:14.000Z 月空人 点击查看全文]]> 2024-02-17T08:35:14.000Z https://www.whbbit.cn/2025/why-migrate-to-nuxt 本站为什么要从 Hexo 迁移到 Nuxt 2025-02-02T03:50:36.000Z 月空人

本文讨论一下我为什么要把博客从Hexo迁移到Nuxt

点击查看全文]]>
本文讨论一下我为什么要把博客从Hexo迁移到Nuxt 2025-01-06T08:38:36.000Z
https://www.whbbit.cn/2025/2025-nongli-new-year 乙巳年除夕记 2025-01-28T15:23:01.000Z 月空人

现在过年不像小时候那样充满了热闹的气氛,而是一些冷清的感觉。

点击查看全文]]>
现在过年不像小时候那样充满了热闹的气氛,而是一些冷清的感觉。 2025-01-28T15:23:01.000Z
https://www.whbbit.cn/2025/good-practices-for-vue-computed-properties 翻译:Vue 计算属性的良好实践 2025-01-28T09:56:14.000Z 月空人

计算属性是 Vue 中的一个强大功能,允许您根据响应式状态动态推导和转换数据。当正确使用时,它们可以使您的代码更简洁、更高效、更易于维护。然而,不当的使用可能会导致意外的错误和性能问题。

点击查看全文]]>
计算属性是 Vue 中的一个强大功能,允许您根据响应式状态动态推导和转换数据。当正确使用时,它们可以使您的代码更简洁、更高效、更易于维护。然而,不当的使用可能会导致意外的错误和性能问题。 2025-01-28T09:56:14.000Z
https://www.whbbit.cn/2025/how-to-dynamically-change-favicon-for-dark-and-light-mode 如何让网站图标跟随系统主题变化? 2025-01-22T05:49:51.000Z 月空人 在暗黑模式下显示亮色图标,亮色模式下显示暗色图标!!

点击查看全文]]>
在暗黑模式下显示亮色图标,亮色模式下显示暗色图标!! 2025-01-22T05:49:51.000Z
https://www.whbbit.cn/2025/git-angular-push-rules Git 提交规范及其在项目里的使用 2025-01-15T23:31:53.000Z 月空人

简单的给你的项目配置和使用 Git 提交规范

点击查看全文]]>
简单的给你的项目配置和使用 Git 提交规范 2025-01-15T23:31:53.000Z
https://www.whbbit.cn/2025/securely-share-environment-variables 使用 zod 对.env 文件约束 2025-01-15T06:52:04.000Z 月空人

使你的环境变量拥有类型,这个是从 Syntax 播客的 CJ 那里学过来的

点击查看全文]]>
使你的环境变量拥有类型,这个是从 Syntax 播客的 CJ 那里学过来的 2025-01-15T06:52:04.000Z
https://www.whbbit.cn/2025/from-local-to-production-deploy-nuxt-with-docker 从本地到生产:使用 Docker 部署 Nuxt 2025-01-15T06:16:16.000Z 月空人 使用 Docker 构建 Nuxt 项目

点击查看全文]]>
使用 Docker 构建 Nuxt 项目 2025-01-15T06:16:16.000Z
https://www.whbbit.cn/2025/building-recursive-components-in-vue 翻译:在 Vue 中构建递归组件 2025-01-14T05:46:17.000Z 月空人

几天前,我想构建一个 Vue 组件,它能够显示嵌套节点树,但我们不知道确切的嵌套数量 - 因此它需要能够递归工作。我很惊讶网络上没有太多关于它的资源,所以我决定写一篇关于它的文章。

点击查看全文]]>
几天前,我想构建一个 Vue 组件,它能够显示嵌套节点树,但我们不知道确切的嵌套数量 - 因此它需要能够递归工作。我很惊讶网络上没有太多关于它的资源,所以我决定写一篇关于它的文章。 2025-01-14T05:46:17.000Z
https://www.whbbit.cn/2025/using-two-script-blocks-in-vue-single-file-components 翻译:在Vue单文件组件中使用两个script块 2025-01-14T03:02:22.000Z 月空人 在这篇文章中,我想向您展示如何在一个 Vue 组件中使用两个脚本块,以便您在遇到类似问题时可以解决它。

点击查看全文]]>
在这篇文章中,我想向您展示如何在一个 Vue 组件中使用两个脚本块,以便您在遇到类似问题时可以解决它。 2025-01-14T03:02:22.000Z
https://www.whbbit.cn/2025/testing-vue-components-with-vitest 翻译:使用 Vitest 测试 Vue 组件 2025-01-14T02:12:32.000Z 月空人

在本文中,我将深入探讨如何使用 Vitest 来测试 Vue 组件。

点击查看全文]]>
在本文中,我将深入探讨如何使用 Vitest 来测试 Vue 组件。 2025-01-14T02:12:32.000Z
https://www.whbbit.cn/2025/frontend-testing-guide-10-essential-rules-for-naming-tests 翻译:前端测试指南:命名测试的 10 条基本规则 2025-01-10T06:31:21.000Z 月空人

更好的测试之路始于一些非常简单的事情。

点击查看全文]]>
更好的测试之路始于一些非常简单的事情。 2025-01-10T06:31:21.000Z
https://www.whbbit.cn/2025/vue3-dynamic-pinia-store 翻译:Vue 3 中的动态 Pinia Store 2025-01-10T06:14:59.000Z 月空人

使用多个组件实例的唯一 ID 创建动态 Pinia 存储

点击查看全文]]>
使用多个组件实例的唯一 ID 创建动态 Pinia 存储 2025-01-10T06:14:59.000Z
https://www.whbbit.cn/2025/a-simple-file-share-system 一个简易的文件共享系统的实现 2025-01-07T03:42:03.000Z 月空人 使用Vue3和Strapi实现一个简易的文件共享系统,可以方便的在局域网内使用账号密码分享文件。

点击查看全文]]>
使用Vue3和Strapi实现一个简易的文件共享系统,可以方便的在局域网内使用账号密码分享文件。 2025-01-07T03:42:03.000Z
https://www.whbbit.cn/2025/vue3-composables-guide 翻译:Vue3 组合式API 完全指南 2025-01-06T04:00:00.000Z 月空人

无论您是刚刚接触 Vue 3 还是一位致力于标准化团队编码风格的经验丰富的开发人员,本指南都可以作为综合资源。

点击查看全文]]>
无论您是刚刚接触 Vue 3 还是一位致力于标准化团队编码风格的经验丰富的开发人员,本指南都可以作为综合资源。 2025-01-06T04:00:00.000Z
https://www.whbbit.cn/2025/how-to-use-the-variant-props-pattern-in-vue 翻译 - 如何在 Vue 中使用Props变体 2025-01-06T03:24:05.000Z 月空人 点击查看全文]]> 2025-01-06T03:24:05.000Z https://www.whbbit.cn/2024/the-heart-channel 心经 2024-12-18T02:43:19.000Z 月空人

心经全文

点击查看全文]]>
心经全文 2024-12-18T02:43:19.000Z
https://www.whbbit.cn/2024/vue-using-url-to-store-state-in-vue 翻译:在 Vue 中使用 URL 存储状态 2024-12-17T07:39:05.000Z 月空人

在本文中,我想向您展示如何在 Vue 应用程序中利用这个强大的浏览器原生功能 🚀

点击查看全文]]>
在本文中,我想向您展示如何在 Vue 应用程序中利用这个强大的浏览器原生功能 🚀 2024-12-17T07:39:05.000Z
https://www.whbbit.cn/2024/vue-good-practices-and-design-patterns-for-vue-composables 翻译:Vue 可组合项的良好实践和设计模式 2024-12-15T05:38:52.000Z 月空人

在本文中,我将总结我们创建的想法,并将它们与我在几篇文章中读到的良好实践和设计模式相结合。

点击查看全文]]>
在本文中,我将总结我们创建的想法,并将它们与我在几篇文章中读到的良好实践和设计模式相结合。 2024-12-15T05:38:52.000Z
https://www.whbbit.cn/2024/vue-cleaner-vue-code 翻译:编写更简洁的Vue.js代码的10个技巧 2024-12-15T04:44:24.000Z 月空人

在本文中,我想列出这些最佳实践,以便您可以开始在 Vue 项目中使用它们:)

点击查看全文]]>
在本文中,我想列出这些最佳实践,以便您可以开始在 Vue 项目中使用它们:) 2024-12-15T04:44:24.000Z
https://www.whbbit.cn/2024/rsbuild-create-demo Rsbuild创建项目 2024-12-08T02:08:01.000Z 月空人 点击查看全文]]> 2024-12-08T02:08:01.000Z https://www.whbbit.cn/2024/components-ref-or-props Vue 组件设计 -- 父子组件调用时使用props还是ref? 2024-11-26T15:57:12.000Z 月空人 关于组件设计的一点思考。

点击查看全文]]>
关于组件设计的一点思考。 2024-11-26T15:57:12.000Z
https://www.whbbit.cn/2024/http-status-codes Http Status Codes 释义 2024-10-23T13:18:21.000Z 月空人 点击查看全文]]> 2024-10-23T13:18:21.000Z https://www.whbbit.cn/2024/node-simple-onion-model-implementation node-简易洋葱模型实现 2024-10-07T07:15:22.000Z 月空人 仿照koa实现一个简易的洋葱模型

点击查看全文]]>
仿照koa实现一个简易的洋葱模型 2024-10-07T07:15:22.000Z
https://www.whbbit.cn/2024/nuxt3-server-error Nuxt报错解决 2024-09-09T07:33:19.000Z 月空人

Nuxt 报错解决

点击查看全文]]>
Nuxt 报错解决 2024-09-09T07:33:19.000Z
https://www.whbbit.cn/2024/event-bus 发布订阅模式 2024-08-16T15:50:01.000Z 月空人 点击查看全文]]> 2024-08-16T15:50:01.000Z https://www.whbbit.cn/2024/mongodb-setup mongodb快速使用 2024-08-01T14:28:48.000Z 月空人

使用 express + mongoose 快速开发API接口

点击查看全文]]>
使用 express + mongoose 快速开发API接口 2024-08-01T14:28:48.000Z
https://www.whbbit.cn/2024/recent-fact-sheet 近况说明 2024-07-14T05:14:55.000Z 月空人

好久没有写博客了,最近经历了很多事

点击查看全文]]>
好久没有写博客了,最近经历了很多事 2024-07-14T05:14:55.000Z
https://www.whbbit.cn/2024/nuxt3-get-assets-dir-image-function nuxt3获取静态图片公用方法 2024-06-20T13:29:45.000Z 月空人 点击查看全文]]> 2024-06-20T13:29:45.000Z https://www.whbbit.cn/2024/nuxt3-useasyncdata-vs-usefetch Nuxt3 useAsyncData vs useFetch 2024-06-10T14:15:04.000Z 月空人

我们该使用那个呢 🧐?

点击查看全文]]>
我们该使用那个呢 🧐? 2024-06-10T14:15:04.000Z
https://www.whbbit.cn/2024/code-review-short-code code review 黑话摘录 2024-06-08T14:22:49.000Z 月空人 点击查看全文]]> 2024-06-08T14:22:49.000Z https://www.whbbit.cn/2024/nuxt3-fetch-data Nuxt3 请求数据 2024-06-05T14:26:42.000Z 月空人

请求数据的最佳实践

点击查看全文]]>
请求数据的最佳实践 2024-06-05T14:26:42.000Z
https://www.whbbit.cn/2024/leetcode-two-sum leetcode 两数之和 2024-05-18T03:00:25.000Z 月空人 点击查看全文]]> 2024-05-18T03:00:25.000Z https://www.whbbit.cn/2024/chart-echarts-in-vue2-component ECharts 在 vue2 中的实践 2024-04-16T12:02:27.000Z 月空人

封装一个 ECharts 容器组件,在使用时可以直接传递一个 options 对象,在组件内部自动初始化基础配置和监听图表大小变化、图表数据变化后自动重新渲染。

点击查看全文]]>
封装一个 ECharts 容器组件,在使用时可以直接传递一个 options 对象,在组件内部自动初始化基础配置和监听图表大小变化、图表数据变化后自动重新渲染。 2024-04-16T12:02:27.000Z
https://www.whbbit.cn/2024/tips 最近学习到的小知识 2024-04-13T03:54:18.000Z 月空人 点击查看全文]]> 2024-04-13T03:54:18.000Z https://www.whbbit.cn/2024/foreverblog 十年之约 2024-03-31T06:24:56.000Z 月空人

为什么加入十年之约?以及我写博客的动机。

点击查看全文]]>
为什么加入十年之约?以及我写博客的动机。 2024-03-31T06:24:56.000Z
https://www.whbbit.cn/2024/ts-namespace TypeScript 命名空间 2024-03-16T16:28:24.000Z 月空人 点击查看全文]]> 2024-03-16T16:28:24.000Z https://www.whbbit.cn/2024/ts-decorators TypeScript 装饰器 2024-03-16T16:27:44.000Z 月空人 点击查看全文]]> 2024-03-16T16:27:44.000Z https://www.whbbit.cn/2024/ts-interface-and-type TypeScript interface和type 2024-03-16T16:27:25.000Z 月空人 点击查看全文]]> 2024-03-16T16:27:25.000Z