- 博客(785)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 husky 9.0升级指南
现在将 Husky 添加到项目中比以往任何时候都更加简单。只需一行代码即可完成与上述相同的操作。无需再阅读文档即可上手。添加钩子就像创建一个文件一样简单。您可以使用您喜欢的编辑器、脚本或基本。已经是体积最小的 Git hooks 管理器了，大约只有。即使设置了 shebang，也会用于运行 hooks。，这很可能使它成为工具包中最小的开发依赖项。新年伊始，我们带来了激动人心的更新！，允许您以后自由升级和迁移您的钩子。可以获得之后发布的错误修复程序。更进一步，将大小减少到仅。更多精彩内容敬请期待。
2026-01-18 21:08:19
211
原创 Monorepo ==Taze 包依赖版本检查使用（7）
一款现代化的命令行工具，可确保您的依赖项始终保持最新状态。npx taze或者递归地对于在特征npx taze用法默认情况下，taze只会更新您指定的版本范围内的版本号（这是安全的，也是默认行为要忽略版本范围，请明确设置允许的最大版本更改。例如，taze major将检查所有更改，并升级到最新的稳定更改，包括主要更改（重大更改），或者taze minor升级到同一主要版本内的最新次要更改。检查是否有更新检查是否进行了更新检查是否已补丁单体仓库taze它内置了顶级的单体仓库支持。
2026-01-16 15:38:08
818
原创 从0到1 使用netlify进行线上部署网站
修改部署思路(这种部署思路旨在利用 Netlify 的代理功能，将前端应用部署在 Netlify 上，同时将 API 请求和图片资源请求代理到你的后端服务器。4.将二步骤的命令复制过来 或者通过git push 你的仓库名 分支(git push origin mian)在github里面创建一个空的仓库**(注意:要空的 md文档也不要有)**如果进去是一个文件夹 那么请你删掉项目外面的那个git 在项目里面创建git。1.在你的项目文件里面初始化仓库 通过git init 进行git的初始化。
2026-01-15 22:34:24
725
原创 微信小程序webview访问的url从https变成http原因排查
运维建议：除了配置，建议在 LB 层面开启HTTP 强制跳转 HTTPS，作为全局安全补丁。开发建议：在小程序web-view的src路径中，养成目录必带的习惯，减少不必要的网络跳转开销。
2026-01-13 22:05:01
570
原创 Monorepo + Turbo （6）
tsup 是一个用于打包web脚本的轻量级工具，它基于 esbuild，旨在提供快速且简单的打包体验。当监听到文件更新时，Vite 会应用 HMR 并且只在需要时更新页面。需要先安装它，我们先npm init，初始化基本项目项目环境，然后进行安装。dependsOn：任务依赖，^build 表示先执行依赖包的 build。cache：是否启用任务缓存，false 表示每次都重新执行。文件，这个就是tsup的配置文件，这里我列出我的配置文件。with：启动当前任务时，同时启动指定包的同名任务。
2026-01-13 13:49:37
486
原创 （catalog协议） == pnpm （5）
repo-countdown 组件},},repo-countdown 组件<template>-- 验证码倒计时按钮 --><button</button><script>/*** 验证码倒计时按钮组件* @description 用于发送短信验证码的倒计时按钮，支持自定义样式和倒计时时间* @property {String} text - 按钮默认文本* @property {String} sendText - 发送中的按钮文本。
2026-01-12 20:49:31
766
2
原创 从入门到实践：前端 Monorepo 工程化实战（4）
在软件开发中，Monorepo（"mono"意为"单一"，"repo"是"存储库"的缩写）是一种策略，它将多个项目集中在一个代码仓库中进行管理。这些项目之间通常具有一定的联系，可以共享代码或依赖，以提高开发效率。
2026-01-10 22:51:16
657
原创 Prettier配置(3)
随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 Prettier 以及 VSCode 设置的具体步骤。通过这些工具，可以显著提升编码效率和代码质量。
2026-01-09 22:09:45
343
原创 最全的 ESLint 配置流程
在前端开发中，代码质量和一致性至关重要。是帮助你提升代码质量的关键工具，尤其是在使用和进行开发时，合理配置和使用 ESLint 能够大幅提升开发效率和代码质量。但是，你知道如何简单详细配置，并让它自动为你提示和修复代码问题吗？如果还不清楚，抓紧学习，这里一站式步骤配置到你的项目中！希望将来它能为您提供所需的帮助！也欢迎在评论区分享你的问题或见解。
2026-01-08 20:33:52
851
原创 commitlint安装和配置使用教程
本文介绍了如何使用commitlint和Commitizen工具规范Git提交信息。主要内容包括：1）安装commitlint插件和husky，配置提交验证钩子；2）设置commitlint.config.js文件；3）安装Commitizen适配器cz-git，配置交互式提交模板；4）提供完整的配置示例，包括提交类型选择、范围定义、描述格式等。通过pnpm安装方式说明，并给出npm/yarn的替代命令。这些工具可强制团队遵循统一的提交规范，提高代码管理效率。
2026-01-06 23:26:52
427
原创 v-if 与 v-for 的优先级对比
Vue.js 中使用最多的两个指令就是v-if和v-for，因此开发者们可能会想要同时使用它们。虽然不建议这样做，但有时确实是必须的，于是我们想提供有关其工作方式的指南。由于语法上存在歧义，建议避免在同一元素上同时使用两者。比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。2.x 版本中在一个元素上同时使用v-if和v-for时，v-for会优先作用。3.x 版本中v-if总是优先于v-for生效。
2026-01-05 17:54:55
772
原创 剖析源码Vue项目结构 (一)
circleci 持续集成benchmarks 性能评测dist 输出目录examples 案例flow flow声明文件packages vue中的包scripts 工程化src 源码目录test 测试相关types ts声明文件为了直观的查看目录我们可以通过tree命令来查看src目录下的文件夹。先大概对源码的结构有一个大体的认识。├─compiler # 编译的相关逻辑│ └─parser├─core # vue核心代码。
2026-01-02 21:28:03
937
原创 2025：在真实项目中打磨技术的这一年 —— 我的前端技术年度总结
回顾 2025 年，我没有成为“技术大佬”，也没有站在聚光灯下，但我清楚地感受到：我写代码更稳了我看问题更全了我对技术的焦虑更少了未来我依然会持续写博客、做项目、拆问题，用长期主义对抗浮躁，用真实经验积累技术影响力。这，就是我 2025 年的前端技术年度总结。
2025-12-27 19:40:48
809
原创 为什么你应该停止使用“传统“的margin和padding来设置CSS样式
即使您的应用程序或网站目前不支持根据地域以不同的方向/方位显示文本/内容，开发人员最终也应通过采用上述模式，努力使所有用户都能获得无障碍的网络体验。时，你明确地定义了来自各个方向（上、下、左和右）的边距和填充。这可能会在你的区域设置中创建一个看起来不错的布局，但当使用不同区域设置的用户以与你设计的方式不同的 方向/角度 和查看内容时，可能会感到困惑。虽然一个区域可能从左开始到右结束，但其他区域可能不是，所以以这种方式定义它们将确保无论区域设置如何，margin 和 padding 都会按预期显示。
2025-12-27 19:35:10
282
原创 [uniapp][swtich开关]阻止切换状态(类似阻止事件冒泡)
比如，我有个开关是开启用户信息采集的，点击开关后需要弹框等在用户确认后在更改开关状态，但是默认情况下，你点击后无论如何，开关状态都会改变。uniapp 的switch按钮是默认点击后就切换状态的，但是有时需要根据业务需求提前进行。解决方案：禁用掉switch的点击事件，通过变量。判断后再提示开关启闭状态。
2025-12-27 19:23:53
219
原创 uniapp 返回上一页再进入当前页mounted不执行
但是不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次（基于这一点咱可以把它用于页面预加载数据）；mounted()：页面初始化完成后触发，与created一样只会触发一次（可用于页面初始化数据）；但是，首次进入的时候，函数没有被执行。所以就将我的自定义函数放到了，onLoad里面，解决了首次进入页面不执行的问题。再通过activated()解决再次进入当前页不执行的问题。点击返回到A页面，再次进入到b页面。其实是因为自己基础知识的不扎实，以及vue生命周期的了解不够。
2025-12-27 19:21:07
165
原创 uniapp之实现拖拽排序
最近做uniapp项目的时候需要实现拖拽排序功能，本来准备直接用touchstarttouchmovetouchend三剑客去实现的,但无意中发现uniapp内置了和组件，可快速实现该功能，索性就直接使用该组件，后续对拖拽排序做了一些扩展，希望对你有帮助。拖拽组件源代码放在uniapp插件社区了，有兴趣可以下载下来看看，希望能对你有帮助，如果对该组件有问题，可以评论区留言。
2025-12-22 23:45:07
1051
原创 Eruda：移动端网页调试利器
Eruda是一个开源的移动端网页调试工具，它以插件的形式嵌入到网页中，为开发者提供了类似于桌面端浏览器开发者工具的功能。Eruda支持多种常见的调试功能，如控制台日志输出、元素查看、网络请求监控、性能分析等。通过Eruda，开发者可以在移动设备上直接对网页进行调试，无需连接电脑或使用复杂的调试设备。如果想在其它页面尝试，请在浏览器地址栏上输入以下代码} })();
2025-12-15 18:23:32
675
原创 告别手动引入依赖：unplugin-auto-import 插件助你提升编码体验（内附实现原理）
并非所以依赖都适合自动导入，项目内的代码可能就不一定适合自动引入因为自动引入后，就能像全局变量那样直接使用，但从开发的角度就会丢失依赖链路，虽然另外生成了 Typescript 声明文件，IDE 能够正常识别， 但对于新加入项目的同学来说，他们不一定知道是自动引入，因此可能会降低了一些可读性。因此我们要有权衡。那么，什么样的内容适合自动引入？被广泛认知和使用、不用关注实现、不变的内容这些内容不关注实现，不会影响可读性，不会影响开发，不会对开发者心智造成影响。这类内容，就适合自动引入。
2025-12-11 18:14:23
962
原创 约定式路由生成神器：vite-plugin-pages
个人感觉这个插件功能还是挺实用的，可以用在我们的项目上，就不用每次都要手写路由配置了，也更加容易维护。不得不感叹现在前端开发的工具真的是越来越多了，也越来越实用，vite还有很多实用的功能待我们去探索，这里给作者和尤雨溪老板一个赞👍🏻🫰。
2025-12-11 11:15:30
503
原创 vue == 无渲染组件
另一方面，无渲染组件专注于通过让父组件负责根据无渲染组件暴露的数据和行为渲染适当的 UI 来分离组件的逻辑与呈现。然后，父组件负责根据无渲染组件暴露的数据和行为渲染适当的 UI。我们可以为上面的示例创建三个不同的切换组件，但是，我们可以观察到每个切换元素具有相同的逻辑和行为。我们可以立即看到，我们可以通过提取公共逻辑和行为来创建一个更可重用的模式，这样我们就不必在每个单独的切换组件中重复定义状态和切换方法。这就是使其成为 **无渲染组件** 的原因，即一个只关注逻辑和行为，而将渲染留给其父组件的组件。
2025-12-09 22:14:34
818
原创 Vue中key为index和id的区别详解！
误以为 index 快：性能差异基本可以忽略，相比出现的 bug，性能不是主要理由。以为只在“删除”时会错：插入（尤其头部）同样会出问题。以为后端没有 id 就只能用 index：可以在接收数据时在前端生成稳定 id（只要在数据生命周期内不变即可）。
2025-12-09 17:21:23
698
原创 Vue响应式原理学习：基本原理
数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。使用Vue时，我们只需要修改数据(state)，视图就能够获得相应的更新，这就是响应式系统。数据劫持：当数据变化时，我们可以做一些特定的事情依赖收集：我们要知道那些视图层的内容(DOM)依赖了哪些数据(state派发更新：数据变化后，如何通知依赖这些数据的DOM接下来，我们将一步步地实现一个自己的玩具响应式系统// 调用该方法来检测数据walk() {// 数据拦截},})// 依赖。
2025-12-06 11:11:19
897
原创 使用 Rollup 搭建开发环境 + 手写 Vue2 响应式原理
本文详细介绍了使用Rollup搭建Vue2开发环境及实现其响应式原理的全过程。首先通过Rollup配置构建工具环境，包括Babel转译和开发服务器设置。核心部分深入剖析了Vue2响应式系统的实现：从Vue构造函数初始化到数据代理，重点讲解了defineReactive的核心响应式实现、数组方法劫持和递归监听机制。通过Object.defineProperty实现对象属性劫持，并特殊处理数组方法以保持响应性。文章完整呈现了从数据观测到代理访问的完整流程，为理解Vue2响应式原理提供了清晰的技术路径。
2025-11-28 10:55:03
527
原创 axios get请求如何设置Content-Type
从中可以看出当未设置requestData的时候回删掉Content-Type的设置，其这么做的原因在于是Get请求本身是不需要Content-Type的。然而实际使用中发现并没有成功在请求头里设置Content-Type，经过网上的资料查找发现是由于axios的源码出了问题，具体位置在。重新调用接口，ok大功告成。
2025-11-26 18:26:55
177
原创 正则表达式（/g修饰符）踩坑
可以看到，在第一次调用test()后，lastIndex停在了2这个位置，也就是下一次调用test()时，lastIndex将从2开始， 所以第二次调用test()时会得到false，如果想要返回结果都是true，那么可以手动将lastIndex重置为0。如果想不用多次调用时都要重置为0的情况下，可以不使用/g或/y符号，也可以将表达式放在函数内， 使函数每次调用时都是重新定义正则表达式， 也就不存在下标还是上一次调用的情况。由此可见，下标又回到了0，第二次调用test()则匹配成功。
2025-11-15 15:39:46
367
原创 JavaScript 中被遗忘的关键字（with）
如果语句体中使用的不限定名称与作用域链中的某个属性匹配，则该名称会绑定到该属性以及包含该属性的对象。的代码片段中的标识符）时，JavaScript 会检查一系列对象，如果其中一个对象具有与你在代码中编写的标识符同名的属性，则 JavaScript 会使用该属性的值。通过向作用域链中添加内容，几乎每一行代码的运行速度都会变慢，因为需要搜索的对象数量会增加，才能将标识符解析为值。会遮蔽函数的参数，所以我们最终计算的是两个函数的和，这当然是 NaN。是的，朋友们，信不信由你，这就是 JavaScript。
2025-11-12 11:57:43
619
原创 HTML DOM outerHTML 属性
DOM 接口的outerHTML属性获取描述元素（包括其后代）的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。要仅获取元素内容的 HTML 表示形式或替换元素的内容，请使用属性。
2025-11-03 18:17:45
298
原创 rollup == JavaScript 打包器
随着你需要打包更复杂的代码，通常需要更灵活的配置，例如导入使用 NPM 安装的模块、使用 Babel 编译代码、处理 JSON 文件等等。现在，我们将全局安装它（稍后我们将学习如何将它安装到你的项目中，以便你的构建过程具有可移植性，但暂时不用担心这个）。标签使用，同时避免与其他代码产生不必要的交互。由于设置了一个导出，因此我们需要提供一个全局变量的名称，该变量将由我们的产物创建，以便其他代码可以通过此变量访问我们的导出。你仍然可以像以前一样运行你的代码，并且具有相同的输出，尽管会慢一些，因为加载和解析。
2025-10-30 18:08:50
885
原创 手写 Vuex4 源码（下）
Vuex 在项目中用了很久，只知其然不知其所以然，故研究学习并实现出来。从理解思路到手写出来，然后将实现过程记录下来就有了这篇文章，这个过程断断续续持续了大概一个月，项目和文章基本都是利用下班时间写的，确实挺累的，不过实现出来后往回看，还是学到很多东西，还挺欣慰的；文章有不足的地方还请各位大佬指正；
2025-10-27 18:09:29
713
原创 Element Plus组件v-loading在el-dialog组件上使用无效
最近在开发一个需求，点击操作按钮根据传入的id获取相应数据渲染el-dialog组件内容，我于是按正常方式使用v-loading指令实现加载中loading效果，但事与愿违，v-loading失效了……个人猜测是Element Plus组件库的v-loading指令不支持el-dialog组件上使用。，对于请求服务数据交互提供一个loading加载中效果是一个提高用户体验的好方法。, 之后将会在 2.4.0。
2025-10-23 19:20:26
446
原创 vue 如何实现粘贴复制功能
这是要复制到剪贴板的文本。第二个可选参数是一个 HTML 元素，在使用 clipboard.js 时，它将在内部用作容器。如果你不想修改 HTML，可以使用非常方便的命令式 API。你需要做的就是声明一个函数，执行操作，然后返回一个值。，一旦剪贴板的内容被更新，它就会被解析。在某些情况下，你希望显示一些用户反馈或捕获复制/剪切操作后所选择的内容。事实是，你甚至不需要另一个元素来复制其内容。这种方法兼容性很好，如果项目只使用了一次，不建议使用。）的原因，以便你监听并实现自定义逻辑。适合要复制的内容是变量。
2025-10-23 18:38:30
1372
原创 怎么解决在使用element库时按钮垂直排列出现对不齐
点击右上角的方框套箭头的图标，再将鼠标移到绿色的报名按钮上点击一下，我们发现这个按钮有一个自带的左边距10px。最后发现问题出在element ui库的原始封装上， Element库在封装时候把el-button使用了。这个样式是一个兄弟选择器，选中前一个元素后的所有同级元素的特定元素。打开浏览器的开发者模式，我的是谷歌浏览器（按F12就可以弹出）兄弟选择器，通过点击官网上给的例子也是能看出来的，我们发现添加和移除并不是对齐的，解决操作如下。
2025-10-23 10:04:28
317
原创 搞懂＞＞＞、/deep/、::v-deep、::v-deep()和:deep()的区别与用法
在项目中，尤其是在使用组件化开发时，我们某些时候需要对组件内部的某些样式优化，但Vue的样式封装特性）会阻止外部样式直接作用于组件内部。为了应对这一挑战，Vue社区引入了深度选择器（也称为穿透选择器或阴影穿透选择器），让我们能够跨越组件的封装边界，对内部元素进行样式定制。深度选择器允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。
2025-10-22 17:49:36
879
原创 手写 pinia
state: () => ({ count: 0 }), // 容器中的状态actions: {// action中更改状态},},});总得来说，Pinia 就是 Vuex 的替代版，可以更好的兼容 Vue2，Vue3 以及 TypeScript。在 Vuex 的基础上去掉了 Mutation，只保留了 state, getter 和 action。Pinia 拥有更简洁的语法， 扁平化的代码编排，符合 Vue3 的 Composition api。
2025-10-14 17:30:08
401
原创 Vue 响应式高阶 API - effectScope
这段代码来自 rfc，最开始是有一些疑惑的，watchEffect 和 watch 竟然有返回值，并且是一个函数，执行该函数居然还能清除副作用。这里要注意，如果子作用域是独立的（detached = true），它是不会被父作用域收集的，自然地，在父作用域清除副作用时是不会清除该独立子作用域中的副作用的。很明显，这种维护方式是很繁琐的，特别是在一些巨型的组合函数中，我们收集的副作用很容易遗漏不全，可能导致内存泄漏和其它未知的问题。整个过程都是 Vue 内部处理的，我们不需要关心副作用的收集和清除。
2025-10-08 01:35:52
700
微信公众号的网页授权域名已经支持配置多个方案
2025-04-30
前端 自动部署 前端web自动化部署到服务器脚本 解放双手
2025-04-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人