# 月空人 > 月空人的个人博客，分享技术与生活。“求则得之，舍则失之，是求有益于得也，求在我者也。求之有道，得之有命，是求无益于得也，求在外者也。”。月空是一名开源爱好者，结识了许多志同道合的朋友。这个博客记录了他在生活和技术学习中的点滴经历，充满启发与思考。网站界面简洁美观，内容丰富实用，人气互动活跃，涵盖了编程、生活、学习等多个领域，希望内容能给您好的阅读体验。 ## Content - [使用GitHubActions部署](https://www.weilog.me/raw/posts/2022/githubactions-deploy.md): 使用阿里云服务器搭建 hexo 博客 - [Nginx安装配置](https://www.weilog.me/raw/posts/2022/nginx-install-and-setup.md): ubuntu 系统中 Nginx 的简易安装和配置 - [MIME 类型和 Blob](https://www.weilog.me/raw/posts/2022/blob-and-mime.md): 流文件常见类型概览及前端 Blob 文件下载简易封装 - [视频网站封面图制作](https://www.weilog.me/raw/posts/2022/channel-cover.md): 各主流平台视频封面图大小一览 - [gin初始化项目](https://www.weilog.me/raw/posts/2022/gin-setup.md): 初始化一个 gin 的项目，领略一下 go 语言的风采 - [git统计代码提交数量](https://www.weilog.me/raw/posts/2022/git-log.md): 查看项目中的每个人代码提交量，看看谁在摸鱼吧 - [gulp压缩js文件](https://www.weilog.me/raw/posts/2022/gulp-uflify-js.md): 使用 gulp 来写一个压缩 js 的小工具 - [js数组](https://www.weilog.me/raw/posts/2022/js-array.md): js 数组的基础知识 - [math.js 的使用](https://www.weilog.me/raw/posts/2022/mathjs.md): 常用的 js 计算 精度解决方案 - [uni-app app打包上线要注意的部分](https://www.weilog.me/raw/posts/2022/miniprogram-app-build.md) - [小程序简易请求数据封装](https://www.weilog.me/raw/posts/2022/miniprogram-fetch-data-function.md) - [扫码获取微信抬头](https://www.weilog.me/raw/posts/2022/miniprogram-scancode-get-invoice-title.md) - [扫码跳转至指定界面](https://www.weilog.me/raw/posts/2022/miniprogram-scancode-jump-page.md) - [微信短链 URL Link](https://www.weilog.me/raw/posts/2022/miniprogram-short-link.md) - [showToast 在真机会闪退的问题及解决方案](https://www.weilog.me/raw/posts/2022/miniprogram-showtoast-true-phone-bug.md) - [小程序分包及uniapp分包](https://www.weilog.me/raw/posts/2022/miniprogram-subpackages.md) - [小程序常用工具/文档](https://www.weilog.me/raw/posts/2022/miniprogram-tools.md) - [uniapp 接入微信客服](https://www.weilog.me/raw/posts/2022/miniprogram-uniapp-servicechat.md) - [uniapp 条件编译](https://www.weilog.me/raw/posts/2022/miniprogram-uniapp-conditional-compilation.md) - [uniapp常见问题(一)](https://www.weilog.me/raw/posts/2022/miniprogram-uniapp-issus.md) - [uniapp中使用pinia](https://www.weilog.me/raw/posts/2022/miniprogram-uniapp-use-pinia.md) - [小程序接入微信支付](https://www.weilog.me/raw/posts/2022/miniprogram-wepay.md) - [mock数据](https://www.weilog.me/raw/posts/2022/mock-data.md): 在开发中我们常会用到一些模拟数据来确定程序是否有问题，这次我们一起来看一下怎么使用模拟数据来进行测试 - [n切换node版本](https://www.weilog.me/raw/posts/2022/n-changenode-version.md): linux 和 mac 下如何切换不同的 node 版本呢？ - [nest 拦截器](https://www.weilog.me/raw/posts/2022/nest-exceptionfilter.md): 实现几个常用的 nest 拦截器 - [nest 服务提供者](https://www.weilog.me/raw/posts/2022/nest-providers.md): 实现一些简单的 nest 服务提供者，以此了解服务提供者的作用方式。并且自定义一个 DbModule 接入 typegoose - [nestjs入门](https://www.weilog.me/raw/posts/2022/nestjs-setup.md): 常用模块安装和使用 - [Nginx gzip配置](https://www.weilog.me/raw/posts/2022/nginx-gzip.md): 想让网站访问快一些吗？可以试试这个 - [log4js node日志管理](https://www.weilog.me/raw/posts/2022/node-log4js.md): log4js 是一款 nodejs 日志管理工具 - [nrm切换npm镜像](https://www.weilog.me/raw/posts/2022/nrm.md): 如何快速切换 npm 镜像呢？可以试试这个 - [oss搭建个人图床](https://www.weilog.me/raw/posts/2022/oss-builds-a-personal-image-bed.md): oss 的简单应用 - [pinia 快速使用](https://www.weilog.me/raw/posts/2022/pinia-setup.md): pinia 简易入门指南 - [sass 常用语法](https://www.weilog.me/raw/posts/2022/sass.md): sass 常用语法一览 - [sass实现一个简易的原子样式库](https://www.weilog.me/raw/posts/2022/sass-mini-atomic-pattern-library.md): 用 sass 实现一个简易的原子样式库。通过此了解 sass 基础语法的实际使用。 - [申请https证书并部署至nginx服务器](https://www.weilog.me/raw/posts/2022/site-add-https.md): 申请免费的 https 证书并部署至 nginx 服务 - [建站记事](https://www.weilog.me/raw/posts/2022/site-setup-story.md): 建站过程记 - [vite使用](https://www.weilog.me/raw/posts/2022/vite-basic-use.md): vite 简易使用指南 - [vite开发时问题及解决方案](https://www.weilog.me/raw/posts/2022/vite-development-problems-and-solutions.md): vite开发时问题及解决方案 - [vite插件](https://www.weilog.me/raw/posts/2022/vite-plugins.md): vite插件 - [vscode 基础使用指南](https://www.weilog.me/raw/posts/2022/vscode-use.md) - [Vue3 响应式系统](https://www.weilog.me/raw/posts/2022/vue3-mini-core.md): 跟着尤大实现一下 vue3 的响应式系统 - [给未来的一封信——24周岁生日前](https://www.weilog.me/raw/posts/2023/a-messy-24.md): 未来的你过得如何？是否找到了令你开心的事业，有了一份爱情？或者你还是像现在这样不知道未来的方向，还是像现在这样无头苍蝇似的来回乱窜？ - [Arc浏览器激活码领取](https://www.weilog.me/raw/posts/2023/arc-gift-code.md): Arc 浏览器是真滴好用，如果你没有激活码，可以点击下方链接领取激活码。 - [大同博物馆游览留念](https://www.weilog.me/raw/posts/2023/datong-museum-tour-souvenir.md) - [驾照考试记录](https://www.weilog.me/raw/posts/2023/driving-test-record.md): 要考驾驶证了，但是我好像什么都不懂。用这篇文章记录一下学习驾照的经历。 - [GitHub status 获取GitHub项目信息](https://www.weilog.me/raw/posts/2023/github-status-get-github-project-info.md): 美化一下 GitHub 主页。或者在其他项目中添加一些 GitHub 仓库的信息。 - [医院见闻录](https://www.weilog.me/raw/posts/2023/hospital-records.md): 医院，真的是长见识的地方。 - [对接下来生活的一些思考](https://www.weilog.me/raw/posts/2023/some-thoughts-on-the-rest-of-your-life.md): 真的只有打工这一条路吗？显然不是的，但是勇气从来是我缺乏的气质。 - [壬寅年癸丑月乙卯 新春](https://www.weilog.me/raw/posts/2023/the-spring-festival-of-the-year-of-the-tiger.md): 壬寅年癸丑月乙卯 虎年除夕 - [添加gpg签名](https://www.weilog.me/raw/posts/2023/add-gpg.md): 最近在提交 vue-devui 组件库 pr 时，被要求添加 gpg 签名。之前对这部分没有任何了解，正好了解一下，顺便写一下关于配置 gpg 需要注意的东西和配置的完整步骤。 - [degit -- 拉取项目（不包含提交记录）](https://www.weilog.me/raw/posts/2023/degit.md): 使用开源项目进行代码拉取时，我们不想要之前的提交记录该怎么办呢？ - [Flutter 抓虫记](https://www.weilog.me/raw/posts/2023/flutter-issus.md): 本新手使用 flutter 时遇到的一些问题合集 - [gitlab搭建](https://www.weilog.me/raw/posts/2023/gitlab.md): 这两天买了一个零刻的小主机用来练习 linux 系统的使用，顺便搭建一个 gitlab 仓库，用来学习 gitlab 的自动集成。 - [🔗 在JavaScript中获取Fetch HTTP响应的状态码(翻译)](https://www.weilog.me/raw/posts/2023/javascript-get-response-status-code-fetch.md): 本文说明了如何获取 Fetch HTTP 响应的状态码 - [js拾遗--map](https://www.weilog.me/raw/posts/2023/js-map.md) - [linux工具 - htop](https://www.weilog.me/raw/posts/2023/linux-tools-htop.md) - [mac平台 go开发环境搭建](https://www.weilog.me/raw/posts/2023/mac-go-install.md): 使用 homebrew 安装 go 开发环境 - [macos使用](https://www.weilog.me/raw/posts/2023/macos-setup.md) - [新工作半月谈](https://www.weilog.me/raw/posts/2023/new-work-half-month-talk.md): 来到新公司大概有半个月了，我过得怎么样的？ - [pm2部署Nuxt3](https://www.weilog.me/raw/posts/2023/nuxt3-pm2-deploy-nuxt3.md) - [世界各地手机区号](https://www.weilog.me/raw/posts/2023/phone-prefix.md): 这是一份可以直接用于 ant design select 的世界各地手机区号的 options，已经做了去重工作 - [prisma 快速上手](https://www.weilog.me/raw/posts/2023/prisma-setup.md): prisma 是 nodejs 中著名的 orm 框架，这篇文章我们一起来了解一下 prisma 怎么结合 node 进行数据操作 - [React useCallback使用](https://www.weilog.me/raw/posts/2023/react-usecallback-use.md): 近日在写 React 轮播图组件时遇到自动轮播的问题，在多方请教后，使用 useCallback 解决 - [rest client插件使用](https://www.weilog.me/raw/posts/2023/rest-client-plugin-use.md): rest client 是 vscode 中类似 Postman 的 api 接口请求利器。 - [再观 ReLIFE 有感](https://www.weilog.me/raw/posts/2023/review-relife.md): 如果你有能力回到过去，你会如何重来一次？ - [screen使用](https://www.weilog.me/raw/posts/2023/screen-use.md) - [出发](https://www.weilog.me/raw/posts/2023/set-out.md) - [stellar主题添加代码块复制功能](https://www.weilog.me/raw/posts/2023/stellar-theme-code-copy.md) - [远程工作尝试](https://www.weilog.me/raw/posts/2023/try-remote-work.md): 初次尝试远程工作，感觉还不错。 - [使用Hexo Stellar 主题搭建一个独立博客站点](https://www.weilog.me/raw/posts/2023/use-hexo-stellar-create-a-site.md): 如何使用 stellar 主题做一个自己的独立站点呢？ - [使用frp将本地mc服务器映射到公网](https://www.weilog.me/raw/posts/2023/use-frp.md): 最近买了一个迷你主机，想着用来搭建一个 minecraft 服务器用来和朋友们一起联机，搭建好了才发现好像没什么玩 minecraft 的朋友了。 - [我与前端那些事](https://www.weilog.me/raw/posts/2023/video-my-front-end-story.md): 我与前端的那些缘分 - [给vitepress添加algolia搜索](https://www.weilog.me/raw/posts/2023/vitepress-add-algolia.md): 这里推介一篇文章给 VitePress 添加 algolia 搜索。 - [Vue项目权限控制](https://www.weilog.me/raw/posts/2023/vue-project-permission-control.md): 实现 vue 动态路由的测试，登录 user 和 admin 可以访问不同的菜单 - [vue3自动引入图标](https://www.weilog.me/raw/posts/2023/vue3-auto-import-icon.md): 使用插件自动引入 svg 图标 - [Http Status Codes 释义](https://www.weilog.me/raw/posts/2024/http-status-codes.md) - [近况说明](https://www.weilog.me/raw/posts/2024/recent-fact-sheet.md): 好久没有写博客了，最近经历了很多事 - [心经](https://www.weilog.me/raw/posts/2024/the-heart-channel.md): 心经全文 - [二叉树](https://www.weilog.me/raw/posts/2024/algorithm-traversal.md) - [ECharts 在 vue2 中的实践](https://www.weilog.me/raw/posts/2024/chart-echarts-in-vue2-component.md): 封装一个 ECharts 容器组件，在使用时可以直接传递一个 options 对象，在组件内部自动初始化基础配置和监听图表大小变化、图表数据变化后自动重新渲染。 - [code review 黑话摘录](https://www.weilog.me/raw/posts/2024/code-review-short-code.md) - [Vue 组件设计 -- 父子组件调用时使用props还是ref？](https://www.weilog.me/raw/posts/2024/components-ref-or-props.md): 关于组件设计的一点思考。 - [发布订阅模式](https://www.weilog.me/raw/posts/2024/event-bus.md) - [十年之约](https://www.weilog.me/raw/posts/2024/foreverblog.md): 为什么加入十年之约？以及我写博客的动机。 - [浅尝histoire](https://www.weilog.me/raw/posts/2024/histoire-setup.md) - [事件循环 / EventLoop](https://www.weilog.me/raw/posts/2024/js-eventloop.md) - [浏览器渲染原理](https://www.weilog.me/raw/posts/2024/js-browser-render.md): 什么是渲染？ - [leetcode 两数之和](https://www.weilog.me/raw/posts/2024/leetcode-two-sum.md) - [mongodb快速使用](https://www.weilog.me/raw/posts/2024/mongodb-setup.md): 使用 express + mongoose 快速开发API接口 - [控制反转和依赖注入](https://www.weilog.me/raw/posts/2024/nest-ioc-di.md) - [RBAC权限控制简述](https://www.weilog.me/raw/posts/2024/nest-rbac-permission-control.md): RBAC —— 基于角色的访问控制 - [RESTful 风格设计](https://www.weilog.me/raw/posts/2024/nest-restful-api-design.md) - [node-简易洋葱模型实现](https://www.weilog.me/raw/posts/2024/node-simple-onion-model-implementation.md): 仿照koa实现一个简易的洋葱模型 - [Nuxt3 请求数据](https://www.weilog.me/raw/posts/2024/nuxt3-fetch-data.md): 请求数据的最佳实践 - [Nuxt3 获取静态图片公用方法](https://www.weilog.me/raw/posts/2024/nuxt3-get-assets-dir-image-function.md) - [Nuxt报错解决](https://www.weilog.me/raw/posts/2024/nuxt3-server-error.md): Nuxt 报错解决 - [Nuxt3 useAsyncData vs useFetch](https://www.weilog.me/raw/posts/2024/nuxt3-useasyncdata-vs-usefetch.md): 我们该使用那个呢 🧐？ - [Rsbuild创建项目](https://www.weilog.me/raw/posts/2024/rsbuild-create-demo.md) - [为您的stellar添加medium-zoom](https://www.weilog.me/raw/posts/2024/stellar-theme-add-medium-zoom.md) - [最近学习到的小知识](https://www.weilog.me/raw/posts/2024/tips.md) - [TypeScript 断言](https://www.weilog.me/raw/posts/2024/ts-as.md) - [TypeScript 基本数据类型](https://www.weilog.me/raw/posts/2024/ts-basic-type.md) - [TypeScript 类](https://www.weilog.me/raw/posts/2024/ts-class.md) - [TypeScript 装饰器](https://www.weilog.me/raw/posts/2024/ts-decorators.md) - [TypeScript 枚举](https://www.weilog.me/raw/posts/2024/ts-enum.md) - [TypeScript 泛型](https://www.weilog.me/raw/posts/2024/ts-generics.md) - [TypeScript interface和type](https://www.weilog.me/raw/posts/2024/ts-interface-and-type.md) - [TypeScript 命名空间](https://www.weilog.me/raw/posts/2024/ts-namespace.md) - [TypeScript 元组](https://www.weilog.me/raw/posts/2024/ts-tuple.md) - [给你的vitepress添加图片预览功能](https://www.weilog.me/raw/posts/2024/vitepress-add-image-preview.md): 这次我们在 vitepress 中添加图片预览功能！ - [【翻译】编写更简洁的Vue.js代码的10个技巧](https://www.weilog.me/raw/posts/2024/vue-cleaner-vue-code.md): 在本文中，我想列出这些最佳实践，以便您可以开始在 Vue 项目中使用它们:) - [【翻译】Vue 可组合项的良好实践和设计模式](https://www.weilog.me/raw/posts/2024/vue-good-practices-and-design-patterns-for-vue-composables.md): 在本文中，我将总结我们创建的想法，并将它们与我在几篇文章中读到的良好实践和设计模式相结合。 - [【翻译】在 Vue 中使用 URL 存储状态](https://www.weilog.me/raw/posts/2024/vue-using-url-to-store-state-in-vue.md): 在本文中，我想向您展示如何在 Vue 应用程序中利用这个强大的浏览器原生功能 🚀 - [Vue3 批量注册自定义指令](https://www.weilog.me/raw/posts/2024/vue3-batch-registers-custom-directive.md): 自定义指令可以方便的复用一些需要操作 DOM 的逻辑 - [Vue3 权限指令](https://www.weilog.me/raw/posts/2024/vue3-permission-directive.md): 自定义一个权限指令来动态显示、隐藏， 详细代码可查看https://github.com/Whbbit1999/sable。这里只列出了主要的代码 - [乙巳年六月廿四](https://www.weilog.me/raw/posts/2025/0718-life.md): 今天是山阴县传统庙会的日子，也是小舅舅结婚的日子。 - [乙巳年除夕记](https://www.weilog.me/raw/posts/2025/2025-nongli-new-year.md): 现在过年不像小时候那样充满了热闹的气氛，而是一些冷清的感觉。 - [2025年终总结](https://www.weilog.me/raw/posts/2025/2025-year-end-summary.md): 2025再有几个小时就结束了。用一段模拟对话，看看今年做了什么吧！ - [廿七碎笔](https://www.weilog.me/raw/posts/2025/27-year-old.md): 农历生日在明天，紧挨着圣诞节。今日心血来潮，想写些文字，回看这一年。 - [一个简易的文件共享系统的实现](https://www.weilog.me/raw/posts/2025/a-simple-file-share-system.md): 使用Vue3和Strapi实现一个简易的文件共享系统，可以方便的在局域网内使用账号密码分享文件。 - [【翻译】在 Vue 中构建递归组件](https://www.weilog.me/raw/posts/2025/building-recursive-components-in-vue.md): 几天前，我想构建一个 Vue 组件，它能够显示嵌套节点树，但我们不知道确切的嵌套数量 - 因此它需要能够递归工作。我很惊讶网络上没有太多关于它的资源，所以我决定写一篇关于它的文章。 - [【翻译】Vue 检查 slot 是否为空](https://www.weilog.me/raw/posts/2025/checking-if-a-slot-is-empty-in-vue.md): 在我的 Vue 项目中，我最近需要检查一个插槽是否为空。这个用例是一个可以接受一些内容的插槽的组件，但它也可以在没有它的情况下工作。为此，我查阅了 Vue 文档并自己进行了一些实验，看看是否能让它工作，结果令我非常惊喜，这又是 Vue 框架内置的另一个非常有用的功能。 - [【翻译】前端测试指南：命名测试的 10 条基本规则](https://www.weilog.me/raw/posts/2025/frontend-testing-guide-10-essential-rules-for-naming-tests.md): 更好的测试之路始于一些非常简单的事情。 - [【翻译】如何优化 Vue 应用性能](https://www.weilog.me/raw/posts/2025/how-to-optimize-performance-in-vue-apps.md): Vue 旨在高效处理大多数典型用例，无需大量手动调整。但有时，您会遇到需要更多微调的情况。在本文中，我们将探讨优化 Vue 应用程序性能时需要注意的关键事项。 - [【翻译】 如何在 Vue 中使用Props变体](https://www.weilog.me/raw/posts/2025/how-to-use-the-variant-props-pattern-in-vue.md) - [使用Intl.NumberFormat对数字进行格式化](https://www.weilog.me/raw/posts/2025/intl-numberformat.md): Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Can I Use 中查询到它已经有 94.47% 适配，所以我们可以在项目中使用它。 - [乙巳项目结语](https://www.weilog.me/raw/posts/2025/ys-project-conclusion.md): 亲爱的陌生人，我的第一次分享合集完结了，带着一些不完美，一些坚持，和一些想对你说的话。 - [shadcn-vue-admin 说明](https://www.weilog.me/raw/posts/2025/about-shadcn-vue-admin.md): 有关 shadcn-vue-admin 模板的说明。shadcn-vue-admin是一个管理仪表板，采用 Shadcn-vue、Vue3 和 Vite 精心打造。构建时充分考虑了响应能力和可访问性。这是一个起始（模板）项目，后续会增加更多组件。 - [【翻译】Vue 和 Nuxt 中的 Atomic Design](https://www.weilog.me/raw/posts/2025/atomic-design-vue-or-nuxt.md): 清晰的写作需要清晰的思考。对于编码也是有效的。启动个人项目时，将所有组件扔入一个文件夹中可能会起作用。但是随着项目的增长，尤其是在较大的团队中，这种方法会导致问题： - [hono 集成 Better Auth](https://www.weilog.me/raw/posts/2025/better-auth.md): Better Auth 是一个与框架无关的 TypeScript 身份验证和授权框架。它提供了一套全面的开箱即用功能，并包含一个插件生态系统，简化了高级功能的添加。本文我们将使用 hono 集成它，并在 vue 中使用它。 - [【翻译】构建 Pinia 插件进行跨标签页状态同步](https://www.weilog.me/raw/posts/2025/building-a-pinia-plugin-for-cross-tab-state-syncing.md): 创建一个 Pinia 插件，使用 BroadcastChannel API 实现跨浏览器选项卡的状态同步。该插件允许您标记特定存储以进行跨 Tab 同步，并通过基于时间戳的冲突解决自动处理状态更新。 - [使用 caddy 替换 nginx](https://www.weilog.me/raw/posts/2025/caddy.md): 你是否还在为配置 Nginx 而烦恼？是否还在为 SSL 证书的续期而头疼？Caddy 是一个现代化的 Web 服务器，它可以自动处理 HTTPS 和反向代理等任务，让你专注于开发而不是服务器配置。 - [如何写出干净的组件](https://www.weilog.me/raw/posts/2025/clean-vue-component.md): 本文讲述一部分使用 Vue 的小技巧，帮助你写出更干净的组件。 - [五分钟内免费集成 CodeRabbit 到你的项目中](https://www.weilog.me/raw/posts/2025/coderabbitai-use.md): 没有大佬帮助的话，用 AI review 代码也不错 - [使用 chatgpt 制作自己的小贴纸](https://www.weilog.me/raw/posts/2025/create-own-sticker-use-chatgpt.md): 快来使用 chatgpt 免费的功能来制作属于你自己的小贴纸吧 - [【翻译】使用 Nuxt Layers 进行领域驱动设计](https://www.weilog.me/raw/posts/2025/domain-driven-design-with-nuxt-layers.md): Nuxt 的领域驱动设计 (DDD) 使开发者能够根据业务需求调整软件架构，从而更有效地构建应用程序。本文将深入探讨 Nuxt Layers ，以及它如何增强 Nuxt 中的 DDD 方法，通过将复杂的应用程序组织到层中，从而提高可扩展性和可维护性，使其更易于管理。最终，您将掌握在自己的 Nuxt 项目中应用 DDD 原则的知识。 - [利用 monorepo 在项目中共享 drizzle schema 定义和类型](https://www.weilog.me/raw/posts/2025/drizzle-in-monorepo.md): 还蛮好用的！ - [Drizzle ORM 使用](https://www.weilog.me/raw/posts/2025/drizzle.orm-use.md): 虽然 Drizzle ORM 还没有到 1.0，但是凭借其出色的性能，已经得到了不少的关注了。在它官网的基准测试里，比现在很火的 Prisma 快了好多。我们一起来看一下这个库如何使用吧！ - [逃离北京](https://www.weilog.me/raw/posts/2025/escape-from-beijing.md): 北京很好，也没那么差。 - [BullMQ 初体验](https://www.weilog.me/raw/posts/2025/fitst-experience-with-bullmq.md): BullMQ 是一个快速且强大的 Redis™ 后台作业处理库。 - [从本地到生产：使用 Docker 部署 Nuxt](https://www.weilog.me/raw/posts/2025/from-local-to-production-deploy-nuxt-with-docker.md): 使用 Docker 构建 Nuxt 项目 - [Git 提交规范及其在项目里的使用](https://www.weilog.me/raw/posts/2025/git-angular-push-rules.md): 简单的给你的项目配置和使用 Git 提交规范 - [【翻译】Vue 计算属性的良好实践](https://www.weilog.me/raw/posts/2025/good-practices-for-vue-computed-properties.md): 计算属性是 Vue 中的一个强大功能，允许您根据响应式状态动态推导和转换数据。当正确使用时，它们可以使您的代码更简洁、更高效、更易于维护。然而，不当的使用可能会导致意外的错误和性能问题。 - [【翻译】如何使用 Vitest 在 Vue 中进行视觉回归测试？](https://www.weilog.me/raw/posts/2025/how-to-do-visual-regression-testing-in-vue-with-vitest.md): 在本指南中，您将学习如何使用 Vitest 为 Vue 组件设置视觉回归测试。 - [如何让网站图标跟随系统主题变化？](https://www.weilog.me/raw/posts/2025/how-to-dynamically-change-favicon-for-dark-and-light-mode.md): 在暗黑模式下显示亮色图标，亮色模式下显示暗色图标！！ - [【翻译】如何构建大型 Vue 应用程序](https://www.weilog.me/raw/posts/2025/how-to-structure-a-large-scale-vue-application.md): 构建 Vue.js 应用程序的最佳方法是什么，以便它可以随着规模的增长而扩展并保持可维护性和可扩展性？这是我在很多场合听到过的一个问题，我认为这个问题的答案在于可预测性原则。当谈到创建一个可扩展的项目时，您希望它的一切都尽可能可预测。 - [【翻译】如何选择 Vue 项目架构](https://www.weilog.me/raw/posts/2025/how-to-structure-vue-projects.md): 这篇文章涵盖了适合不同项目规模的各种 Vue 项目结构 - [【翻译】如何使用测试库和 Vitest 测试 Vue Router 组件](https://www.weilog.me/raw/posts/2025/how-to-test-vue-router-components-with-testing-library-and-vitest.md): 本指南将向你展示如何使用真实的路由集成来测试 Vue Router 组件，并使用 mock 进行隔离组件测试。您将学习验证路由-链路交互、编程导航和导航守卫处理。 - [如何使用 Vue Router 的类型化路由](https://www.weilog.me/raw/posts/2025/how-use-typed-vue-router.md): 现在你可以使用 Vue Router 的类型化路由来增强你的 Vue 应用的类型安全性和可维护性。 - [编程学习网站](https://www.weilog.me/raw/posts/2025/learn-site.md): 一些前端需要的技能学习网站 - [在 Nestjs 中使用验证码](https://www.weilog.me/raw/posts/2025/nest-captcha.md): 在登录时，我们需要提供一个验证码来防止攻击，这篇文章就来说明一下如何实现验证码模块。 - [nest-config 模块的人体工学适配](https://www.weilog.me/raw/posts/2025/nest-config.md): nestjs 官方的 nest-config 模块已经很好用了，但是我们有更好用的方法！ - [在 Nestjs 中使用 Drizzle ORM](https://www.weilog.me/raw/posts/2025/nestjs-drizzle.md): drizzle 是一个很好的 ORM 框架，但是它如何结合强大的 Nestjs 来使用呢？官方文档中并没有说明，我们这里做一点简单的“教程”，希望能对你有所帮助！ - [在 nestjs 中使用 scalar](https://www.weilog.me/raw/posts/2025/nestjs-scalar.md): 在 nodejs 开发 API 时，使用 swagger 生成文档很方便，但是默认的样式看起来不是特别漂亮。而 scalar 为我们提供了很好的界面。今天我们就一起把它集成到 nestjs 中。 - [实用包推荐：ua-parser-js](https://www.weilog.me/raw/posts/2025/package-recommend-ua-parser-js.md): 用于用于检测用户的浏览器、作系统、CPU 和设备类型/型号。 - [近日小结【随机犯病篇】](https://www.weilog.me/raw/posts/2025/recent-summary.md): 25 年回北京记 - [使用 zod 对.env 文件约束](https://www.weilog.me/raw/posts/2025/securely-share-environment-variables.md): 使你的环境变量拥有类型,这个是从 Syntax 播客的 CJ 那里学过来的 - [shadcn-vue-admin 100星留念](https://www.weilog.me/raw/posts/2025/shadcn-vue-admin-100-star.md): shadcn-vue 已经 100 个星了！！！🥳 从2024年12月12日开始在 Github 上发布此仓库已经半年时间了！我想，这 100 个星对于我自己来说是一个大的突破。 - [一些 Nestjs 的自定义装饰器](https://www.weilog.me/raw/posts/2025/snippets-nestjs-custom-decorators.md): 可以直接复制使用的 Nestjs 自定义装饰器 - [Nestjs + Drizzle 项目中一些常用的自定义校验](https://www.weilog.me/raw/posts/2025/snippets-nestjs-drizzle-custom-validation.md): 可以直接复制使用的自定义校验规则 - [tailwindcss-v4 兼容性处理](https://www.weilog.me/raw/posts/2025/tailwindcss-v4-compatibility-processing.md): tailwindcss v4版本使用了 OKLCH 色彩空间，旧版的浏览器兼容性不是很好，如何解决这个问题呢？ - [【翻译】使用 Vitest 测试 Vue 组件](https://www.weilog.me/raw/posts/2025/testing-vue-components-with-vitest.md): 在本文中，我将深入探讨如何使用 Vitest 来测试 Vue 组件。 - [广武明长城半日游](https://www.weilog.me/raw/posts/2025/travel-guangwu-changcheng.md): 说起广武，下意识想到的是一双深邃的眸子，再往外就是虚焦的一张脸蛋...... - [【翻译】编写易于编译的TypeScript代码](https://www.weilog.me/raw/posts/2025/typescript-performance.md): 来自 TypeScript 官方的 Wiki 文章，介绍了多种提升 TypeScript 性能的实践方法。 - [目前所用到的设备](https://www.weilog.me/raw/posts/2025/uses.md): 嘿嘿，看看我用的一些设备吧！ - [【翻译】在Vue单文件组件中使用两个script块](https://www.weilog.me/raw/posts/2025/using-two-script-blocks-in-vue-single-file-components.md): 在这篇文章中，我想向您展示如何在一个 Vue 组件中使用两个脚本块，以便您在遇到类似问题时可以解决它。 - [Vue Vapor mode 来了](https://www.weilog.me/raw/posts/2025/vue-alpha-vapor-mode.md): Vue 3.6.0-alpha.1在近几日发布了，它引入了说了很久的 Vapor Mode，今天我们一起看下为什么需要 Vapor Mode 以及目前使用它需要知道的事情。 - [【翻译】Vue3 组合式API 完全指南](https://www.weilog.me/raw/posts/2025/vue3-composables-guide.md): 无论您是刚刚接触 Vue 3 还是一位致力于标准化团队编码风格的经验丰富的开发人员，本指南都可以作为综合资源。 - [【翻译】Vue 3 中的动态 Pinia Store](https://www.weilog.me/raw/posts/2025/vue3-dynamic-pinia-store.md): 使用多个组件实例的唯一 ID 创建动态 Pinia 存储 - [为什么我在 Nodejs 中选择 drizzle](https://www.weilog.me/raw/posts/2025/why-di-i-choose-drizzle-orm-in-nodejs.md): Prisma 很棒，但是 drizzle 更吸引我。 - [本站为什么要从 Hexo 迁移到 Nuxt](https://www.weilog.me/raw/posts/2025/why-migrate-to-nuxt.md): 本文讨论一下我为什么要把博客从Hexo迁移到Nuxt - [为什么升级至 Nuxt Content v3?](https://www.weilog.me/raw/posts/2025/why-migrate-to-nuxt-content-v3.md): 本站为什么呀迁移到 Nuxt Content v3 - [或许你应该看看 shadcn-vue](https://www.weilog.me/raw/posts/2025/you-should-use-shadcn-vue.md): shadcn-vue在最近将input-group和button-group组件加进来了，和目前主流的一些组件库相比，缺失的组件已经很少了。 - [Zod 基础用法](https://www.weilog.me/raw/posts/2025/zod-use.md): 本文简单讨论一下 Zod 在项目中的实际使用 - [BFF简述](https://www.weilog.me/raw/posts/2026/bff-in-brief.md): BFF 是一种常见的架构模式，用于为不同类型的前端客户端提供定制化的后端服务。 - [AirPods 4 VS AirPods pro 3](https://www.weilog.me/raw/posts/2026/air-pods-4-vs-air-pods-pro-3.md): 使用这两款耳机已经有一段时间了，来看看它们的一些特点。 - [手把手教你如何为 shadcn-vue 贡献代码](https://www.weilog.me/raw/posts/2026/how-to-contribute-to-shadcn-vue.md): 一份为 shadcn-vue 贡献组件代码的完整指南，从寻找 issue 到提交 PR，手把手带你迈出第一步。 - [HTTP 状态码和短语](https://www.weilog.me/raw/posts/2026/http-status-codes-and-phrases-cheat-sheet.md): 快速查询常见的 HTTP 状态码及含义 - [使用 oxlint + oxfmt 替换 ESLint + Prettier](https://www.weilog.me/raw/posts/2026/migrate-eslint-and-prettier-to-oxlint-and-oxfmt.md): 最近我将自己的 Nest 项目中的 ESLint 和 Prettier 替换为 oxlint 和 oxfmt，至今运行良好。 - [发布自己的 shadcn-vue 扩展组件，并支持 CLI 安装](https://www.weilog.me/raw/posts/2026/publish-your-own-shadcn-extension-with-cli.md): 将自己的 Vue 组件发布为 shadcn-vue Registry，并像官方组件一样通过 CLI 安装。 - [一个不错的本地输入解决方案](https://www.weilog.me/raw/posts/2026/rime-setting.md): RIME 输入引擎 + 雾凇拼音用起来是真不错！ - [在 2026 年你可以使用的新的 JavaScript Set API](https://www.weilog.me/raw/posts/2026/the-latest-js-set-api-you-can-use-in-2026.md): Set 新添加了一些好用的 API，我们一起来看看吧！ - [Zod 和 Valibot 的异同](https://www.weilog.me/raw/posts/2026/zod-vs-valibot.md): 本文将比较 Zod 和 Valibot 之间的区别，帮助你在选择校验库时做一点参考 ## Link - [Link](https://www.weilog.me/raw/link.md) ## Me - [Me](https://www.weilog.me/raw/me.md)