文章
共 88 篇,大多发表在掘金。
2026
4 篇
改 3 行配置，我的 Tauri dev 冷启动从 100 秒干到 4 秒
Tauri + Vue3 + Vite 8 的客户端应用。 每次 dev 冷启动需要将近2分钟，看如何改动三行代码将冷启动减少 90s
测试文章：编辑器迁移验证
标题一 粗体 和 行内代码 :rocket: | 列 A | 列 B | | | | | 1 | 2 | [x] 已完成 [ ] 待办
Nuxt3 与官网 SEO：从 TDK 配置到搜索引擎收录
使用 Nuxt3 进行官网 SEO 优化，涵盖 TDK 配置、sitemap/robots 生成、OgImage 自动创建，以及 Google、Bing 站点提交收录全流程。
优化使用 Nuxt3 开发的官网首页，秒开！
看我如何优化nuxt3 开发的官网，首先排查加载慢的原因，然后通过对应的优化手段让加载速度起飞，比如开启 http2、压缩图片、延迟加载字体、静态文件上 cdn
2025
12 篇
Git提交信息太乱？AI一键美化！一行命令拯救你的项目历史🚀
git-rewrite-commits 用 AI 自动重写杂乱的 Git 提交信息。支持 Ollama 本地或云端模型，只需一行命令，即可规范化整个提交历史，再也不用手动修改！
使用 LangChain 创建一个简单的 Agent
LangChain、AI SDK、Agent、LangSmith这么多名词你知道是什么吗？文章实现了一个的 Agent 可以回答某地区的天气情况，助你搞明白这些东西是什么！
VMware Mac m系列安装 Windws 11，保姆级教程
本文实践了 VMware Fusion Mac 安装 win11 的过程，通过安装 VMware-tools 解决 win11 安装后没有网络的情况，堪称保姆级教程！
优化 Nextjs 开发的个人博客首页，秒开！
本文实践了将使用 Nextjs 开发个人博客首页由客户端渲染转换为服务端渲染 + 接口数据缓存的方式，让个人博客首页达到了秒开的效果
MCP Server 的三种实现
MCP 规范定义了三种标准的传输机制：标准输入和标准输出的通信 STDIO、服务器发送事件 SSE、可流式传输 HTTP 对应三种MCP Server 的实现， SSE 已经是旧的标准预计会被取代！
前端也需要了解的 mcp 知识
本文回答了作者的一些疑问： MCP 是什么、可以干什么？如何实现一个 MCP？如何测试 MCP 服务？如何使用 MCP ？
答应我不要把 mitt 挂载到 vue3 的 globalProperties 上好吗？
直接将 mitt 挂载到 globalProperties 上 非最佳做法。vue 官方建议谨慎使用 globalProperties，而 getCurrentInstance 已只作内部使用。
这位同学说一说 vue3 的 Provide、Inject
本文介绍了vue3 的 Provide、Inject 的使用及一些使用中的细节，而后通过阅读源码来理解 Provide、Inject 是如何实现的。
这位同学来说一说 vue3 的组件通信
Vue 组件间通信的多种方案：父传子通过 Props 和回调函数，子传父使用 emit；跨组件通信涵盖 Provide/Inject、共享状态模式及事件总线。
解决浏览器麦克风持续显示使用中的问题
开发过程中遇到一个奇怪的问题：当用户进入某语音评测功能页面时，浏览器地址栏的麦克风图标一直显示为“正在使用中”，切换到其他页面也未能清除这一状态。 用户因此误会我们在后台偷偷录音。
深入解析 mitt 和 vueuse useEventBus 的实现
`mitt` 和 `vueuse useEventBus` 都是对事件的发布订阅的实现，只用大约 40 行代码就实现了完整的功能
vite 插件打包时记录项目的版本信息让外部访问
前端项目不依赖后端如何向外部提供可访问的版本信息呢？本文通过实现一个 vite 插件在打包时生成项目的版本信息然后让外部可以通过请求来获取。
2024
21 篇
mswjs 让前端 mock 不只是在本地
MSW.js 是一款强大的前端接口模拟库，不仅支持本地开发，还能部署线上使用。通过拦截网络请求，灵活返回 REST、GraphQL 和 WebSocket 的模拟数据，是调试和测试的理想工具。
vueuse 源码: createEventHook
本文分析了 vueuse 中 createEventHook 函数的作用以及实现！虽然只有不到 30 行代码但实现思路仍值得我们学习！
nextjs 使用 imagekit api 完成文件上传
本文使用 nextjs、imagekit api 实现了项目的文件上传, imageKit 是一款包含图像优化、处理和存储解决方案,免费计划提供 5GB 的存储空间
create-vite 源码阅读
本文分析了 `create-vite` 的源码**核心逻辑是根据用户的选择将现有的模版复制到对应的目录** init 函数中实现了这一逻辑
使用 nextjs 构建 ai 对话页面
本文实践了如何用 Next.js 、智谱 AI 的 GLM-4-Flash 模型（免费）、 Vercel AI SDK 搭建一个简单的对话式 AI 页面
Next.js 定时同步掘金文章到个人博客
通过 Next.js 和 Prisma，自动将掘金的文章同步到博客数据库。结合 MySQL 和 API 接口，定时抓取和存储掘金最新文章数据并在个人博客中展示
写 vue 的我却用 nextjs 开发个人博客
使用 Next.js 构建个人博客。实现了多种登录方式、文章管理、掘金内容同步、留言和 AI 对话等功能。
nextjs集成掘金 bytemd 编辑器
本文实践了在 nextjs 中如何集成掘金的 bytemd 编辑器以及插件的集成 封装了一个编辑器组件和预览组件 因为官方没有提供深色主题所以还自行实现了深色主题的样式
Vue3组件二次封装的小技巧
本文实践了Vue3组件二次封装的三个实用技巧:实现双向数据绑定、向子组件传递插槽、获取子组件ref。通过实际代码示例,展示了使用defineModel、h函数和Proxy等新特性来简化和优化组件封装过
NestJS 使用 TypeORM CLI 高效管理数据库变更
在 NestJS 项目中，利用 TypeORM CLI 管理数据库变更能够高效地将本地表字段的修改应用到生产数据库。这种方法显著减少了手动操作可能导致的遗漏和错误，确保数据库结构的一致性与可靠性。
网站集成 github 登录太简单了!
本文实践了 web 网站如何集成 github 登录,前后端代码均已开源 前端需要调用一个接口,后端需要调用两个接口即可完成
写一个双 token demo 含前后端实现
本文通过一张图介绍了双 token 的执行流程以及双 token 有什么好处,然后对双 token 机制进行了实践包含前端后端实现
GitHub actions 自动部署 goframe 项目到云服务器
一个 goframe 项目部署居然会让我来来回回折腾三次 第一次: goframe 手动打包部署 第二次: GitHub actions + docker 自动部署 第三次:😳
nuxt3配置pwa
本文实践了在 nuxt3 中如何配置 pwa,当然是比较简单的实践 pwa 作为渐进式 Web 应用能做不止如此!
20分钟,实现一个根据ip查询地理信息的接口
20分钟带你实现根据ip查询地理信息的服务接口,地理信息数据的获取、vercel functions 无服务器函数的使用
GitHub actions + docker 自动部署 goframe 项目
首先来说需要实现一种什么效果 当我们写完代码打上 git tag 推送到 GitHub 仓库时自动触发 GitHub actions 工作流,将项目打包并自动发布更新
五年前端这题都做不对?
实现汗颜,作为一个多年的老前端做了一遍题居然不及格! 一时陷入了反思中备受打击,诚请各位大哥来一探究竟!
goframe 手动打包部署
本文介绍了 goframe 项目本地打包后如何部署云服务器,以及接口 https 的配置申请证书到 nginx 配置
go 基础2
这里是 go 基础大部分内容来源于一门视频课程 ,学完后再来看手摸手开发一个全栈项目就基本可以直接上手了,项目本身没有什么难度!
go 基础语法
这里是 go 的基本语法大部分内容来源于一门视频课程 学完后再来看手摸手开发一个全栈项目就基本可以直接上手了,项目本身没有什么难度!
手摸手开发一个全栈项目
手摸手开发一个短链生成管理平台,前端: vite5、vue3全家桶、element-plus、vueuse,后端: goframe、go(1.18)、mysql、redis、七牛云 oss、邮件发送
2023
9 篇
使用turfjs、地图实现附近充电宝
是的，我看过大佬写的Nest + Redis + 地图，实现附近的充电宝这给我提供了写作的灵感，感谢大佬！ 既然通过后端支持可以实现附近点位检索的功能，那么依靠纯前端可以实现吗？ 答案是可以的
go ➕ “蓝兔支付”实现个人网上支付
支付宝、微信的网上支付需要营业执照个人无法直接使用。 如果个人需要实现网上支付功能，目前大部分应该是都是依赖第三方聚合支付来实现。本文使用蓝兔支付来实现个人网上支付功能。
看了官网让我对自己关于ref、reactive的理解产生了怀疑！
vue3 中 ref 与 reactive 有各自的适用场景，单纯的使用 ref 一把梭与定义一个 reactive 把所有变量都塞进去都不是一个推荐的做法。
生成指定辖区内随机点
在 web 地图开发过程中可能需要根据某一个区域生成一些随机点用来做测试。 之前在某个网站有这个功能是借助百度地图相关 api 来实现的，那我们不借助这些地图厂商的 api 可以实现吗？答案是可以的
一个开源的leafletjs示例项目
一个 vue3.x 与 leafletjs 结合使用示例的开源项目，让新手 leafletjs 使用更加简单，欢迎大家共建。
Pinia极速通关！
Pinia 是一个状态管理库与 vuex 的作用及定位一致。 同时支持 vue2、3（会有部分差异）最重要的一点是它支持 组合式API，也因为此它会比 vuex 更加灵活。
nuxt3 多环境配置及部署
文章主要介绍了 nuxt3 中多环境的打包及部署，在 nuxt3 中使用不同的 env 文件可以实现不同环境的打包。文章最后还介绍了使用Nginx 部署打包后的文件及配置 https 访问。
改了个element-plus文档的错误
改了个 tree 组件 setCheckedKeys 方法的描述 这个文档错误比较老🤔最开始就是错的(看记录是一直都没有修复过的)！ 现在 element-ui 的文档依然是错误的！
七牛云使用自定义域名
记录配置七牛云自定义域名的过程，访问内容需要https支持的话需要申请证书，不需要https则不需要。
2022
14 篇
你有没有好奇过vue文档的检索是怎么实现的？
本文详细实践了如何为文档增加 `algolia` 检索，实现类似vue文档的检索效果，最终也是为vue devui 的文档增加了文档检索功能。
localStorage容量太小?试试它们
localStorage 的存储大小在 5M - 10M，在一些场景下 根本不够用，可使用 IndexedDB 存储数据其大小一般在 `250M` 以上
我相信这是vue3复用代码的正确姿势！
在vue2中代码复用一般是 mixins 混入来实现但使用 mixins 进行代码复用会有一些问题 vue3虽然对 mixins 进行了保留但不再推荐使用。
垃圾代码的一些特点！
是什么样的代码让同事直呼“卧槽”、让技术经理羞愤难当、让老板黯然落泪！！！同事看了已经三天没理我了！
从零到一建立属于自己的前端组件库
超越站内九成建设组件库的文章，真正从零到一实现企业级前端组建库建设，历时一周总结完善，项目技术栈 vite3、vitepress、vitest、vue3、tsx
vue3-ccui之组件库打包发布
超越站内九成建设组件库的文章，真正从零到一实现企业级前端组建库建设，历时一周总结完善，项目技术栈 vite3、vitepress、vitest、vue3、tsx
夏天需要吃西瓜,项目也需要Lint工具链！
本文将从零到一介绍 Eslint、Prettier、Stylelint、Commitlint、ls-lint 的安装配置以及结合 Husky+lint-staged 做自动化检查
不要用vue2的思维写vue3
不要用vue2.x的思维去写vue3.x，两者虽是同源，但是sfc与setup的代码组织方式有一定的差别。
el-Cascader懒加载数据回显
踩坑实践，这是正确的 el-Cascader懒加载数据回显 处理方式，问题很简单，但是处理不好也是要浪费一些时间的
获取省、市、区、乡镇边界数据geojson
这是正确的！！！！亲测可用的 获取乡镇边界的方法。 两种方式 一种直接拿转换好的geojson数据，一种自己转换。 一， 阿里云盘 全国乡镇边界数据 「我国乡镇行政区划.json」，点击链接保存，或者
git将某个分支的n次提交合并到任意分支
将任意分支的任意提交合并到任意的分支。 git cherry-pick git rebase 结合实现。
求求你们了，对自己代码质量有点要求！
最近在合并几个项目的代码，把功能拼一拼简称项目拼多多。 几个系统都没有 eslint 之类的东西，我居然想给 拼多多 加上代码检查。我还真的干了，于是就有了下面这些奇奇怪怪甚至有甚至有些可爱的代码。
vue多页实践-nginx部署
nginx 部署多页应用实践，多页打包多应用部署，多页打包单应用部署，遇到一些坑比如 部分应用无法访问静态资源。
vue多页实践-开发
从零到一将vue-cli创建的spa应用改造为多页应用，内含多应用打包，单应用打包配置（.env环境区分）。
2021
16 篇
vue3+elementPlus主题动态切换2022，亲测可用！
本文实践了vue3.x +elementPlus-ui实现动态主题切换，可能是目前最完整的换肤方案，亲测可用！！！！
自定义高德地图深色主题
有一说一，高德地图的深色主题，是真的欣赏不来。让我们来自定义一个深色主题。 高德地图官方提供了在线主题生成工具。
vue + element-ui动态主题及网站换肤2021，亲测可用！！！
本文使用vue+element-ui实现了 element-ui动态主题更换（基本无需额外书写css 覆盖样式）及网站动态换肤。
element-ui定制主题
element-ui 定制属于自己主题，不需要覆盖原有element-ui原有样式即可实现深色主题。
使用patch-package修改`node_modules`
通过使用patch-package修改`node_modules`，以解决因为三方依赖中存在特定信息导致的信息漏洞！
我是真的记不全ES6+所有知识啊！
es6-11学习总结，是在是太多了，我是真的记不住啊！ 本文很多参考 mdn，因为它相对权威 且含有非常多的示例。
openlayers 实战离线地图
从零到一 带你实战 openlayers 离线地图的使用，内容包括： 获取离线地图瓦片 openlayers加载离线地图瓦片 显示地理坐标 显示地理坐标范围。
这两个前端下载库推荐给你
简介 本文介绍两个下载库的使用 1. js-file-download 2. FileSaver.js 两者各有优劣。 使用库的意义在于，库的作者已经处理了很多问题比如兼容。而越多人使用的库也越有保证
高德地图雷达扫描效果实现
一看就会，十分钟看完。后边用到不挠头发。 这个其实没什么难点，在地图上动效不是很常见，最主要的是我在搜索高德地图雷达扫描, 地图雷达扫描 得到的并没有直接能用的。某篇文章的评论下一位老哥评论说 我是很
手摸手之日历组件
开始 本文纯靠自己思路来写，如有雷同，也不是抄袭。 阅读本文前，需要了解一点ts，vue3，jsx语法。😯 还有moment相关语法。 预想效果 or 实际效果 简直是一模一样😄 预想效果 eleme
手摸手之JSX card卡片组件
card 卡片 相对其他一些组件比较简单，但是也有一些内在天地。 前置知识 vue3 vue-jsx vue组件插槽 上边不懂也没关系 能看的懂 或者看一些这个 vue3 JSX 从零开始 开始 新建
vue3 JSX 从零开始
本文讲解了vue中的jsx 基本语法及详细使用案例。新手友好。适合新手观看。需要了解vue相关知识。友情提示请阅读官方文档。
webRtc 流媒体播放-vue
1. JSWebrtc 对浏览器的 Webrtc 做了简单的封装，支持 SRS 的 RTC 流的播放. 2. 描述了如何让在vue中使用JSWebrtc 并封装方便调用。
beego安装
安装beego文档地址安装 bee 工具bee 工具是一个为了协助快速开发 beego 项目而创建的项目，通过 bee 您可以很容易的进行 beego 项目的创建、热编译、开发、测试、和部署。bee
vue3.0实战踩坑
年前公司开了一个新项目，普通的业务系统，心痒难耐的就上了 3.0 的船，遗憾的是工期比较紧没上ts (我倒是希望搞一搞tsx， 此处叹气),小坑有一点。不过也算是踩过来了。 本文主要整理记录一些，实际开发中遇到的问题，所以vue3.0 实践大佬 可以不用继续看了，面向的是像我一…
手摸手之vue单选组件
本次是一个单选组件，现在基本上可以说是个ui框架都有单选组件。换句话说，你连一个单选组件都没有好意思说自己是个ui框架（开玩笑） 在vue的文档中有一章叫做 表单输入绑定 其中有一章是介绍单选按钮的。
2020
12 篇
手摸手，配置项目中全局loading
在后台管理项目中接口的请求响应速度取决于很多因素，如网络、带宽、同时发起的请求数量===，无法将请求结果及时响应的页面上，而我们又需要告诉用户，数据已经在加载了，你需要先等一等，喝杯茶。这个时候就需要 loading了 ，但是一个项目里又不仅仅是只有一个请求，每个都写一遍 lo…
echarts 自动滚动+ tooltip定时移动
其实官网有写，侧面说明了 看文档的重要性。 官网文档中提供的方法依然是通过定时器来修改dispatchAction来实现。
vue中使用地图进行点、线、面绘制（vue + MineMap ）
其实前端使用地图真的没有那么难，任何事物都是讲究方法的，前端使用地图也是一样的。 维基百科这样介绍：GeoJSON是一种基于JSON的地理空间数据交换格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。 地球坐标系——WG…
不知名的地图？
大概很多人都以为国内地图只有高德、百度、腾讯,其实不然，本文章仅是介绍一些国内地图的大概内容。了解下其他的地图。
vue 视频播放器 xgplayer 实践
西瓜播放器是一个基于HTML5播放器，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。支持自定义ui，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这…
Nest.js入门、数据库连接
Nest 是一个用于构建高效，可扩展的 Node.js 服务器端应用程序的框架。它使用渐进式 JavaScript，内置并完全支持 TypeScript（但仍然允许开发人员使用纯 JavaScript 编写代码）并结合了 OOP（面向对象编程），FP（函数式编程）和 FRP（函…
原生video，rtmp，rtmp 视频流截图
由于其是只支持传入ing，video(图像、画布或视频)，所以使用 vue-video-player 插件时某些格式的流不是基于video进行播放也就不存在上述的截图，具体可查看 dom 元素。 阿里云Web播放器SDK，同时支持Flash和Html5两种播放技术。 但是其特别…
rtmp、rtsp、flv、mp4、hls视频流测试地址
.rtmp、.rtsp、.flv、 .MP4、 .hls视频流测试地址 在线地址，你绝对值得拥用！！
vue根据实时消息，自动播放对应语音
后端实时比对产生预警信息，前端通过WebSocket接收预警信息并播放音频。 首先需要知道 谷歌在 66 版本以后就不允许自动播放音视频及通过函数触发play() 进行播放。 提示表明 用户必须先于浏览器进行交互，就是说用户必须通过点击 移动鼠标 等操作，才能播放音视频。 规则…
flutter 升级版本后 构建失败 Gradle task assembleDebug failed with exit code 1
升级后报错如下建议执行下flutterclean删除构建文件解决办法替换以为文件地址为国内地址flutter/packages/flutter_tools/gradle/resolve_depende
flv.js + vue 播放 .flv流媒体
Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发（ECMAScript 6 编写） ，未用到 Flash。 Flv.js 在 js 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 …
vue实现网站换肤-CSS变量
换肤的实现有很多种，本文使用 css 变量实现 基本思想是： 把所有换肤需要用到的颜色 抽取为变量。使用js统一进行替换。