- 博客(48)
- 资源 (3)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 Pinia 与 Vue Router 权限控制实战（衔接Pinia基础篇）
本文基于Pinia状态管理和Vue Router，实现完整的权限控制方案。通过复用已有的useUserStore，新增usePermissionStore存储权限信息，结合Vue Router的导航守卫和动态路由功能，解决企业级项目中的四大核心问题：未登录拦截、角色权限校验、动态路由生成和页面元素权限控制。方案包含路由初始化配置（分常量路由和动态路由）、权限校验逻辑、持久化处理等，确保状态管理与路由权限形成闭环，适用于中大型项目需求。
2026-03-23 13:12:43
129
原创 Pinia 状态管理完全指南：从基础到模块化
Pinia：Vue3 状态管理最佳实践 Pinia 作为 Vue3 官方推荐的状态管理库，相比 Vuex 具有显著优势： 极简 API 设计，无需复杂模块配置 原生 TypeScript 支持，类型推导完善 轻量体积仅 2KB，性能更优
2026-03-23 12:58:46
70
原创 Vue3 核心 API 补充解析：toRef / toRefs / unref / isRef
本文深入解析Vue3中四个高频且易混淆的响应式API：toRef、toRefs、unref和isRef。toRef用于创建响应式对象的属性引用，保持双向绑定；toRefs批量转换响应式对象属性，解决解构丢失响应式问题；unref自动解包ref值，简化代码逻辑；isRef用于判断变量是否为ref类型。文章通过可运行代码示例、错误示范和避坑指南，帮助开发者掌握这些API的核心用法，避免响应式失效的常见问题。特别强调toRef与ref的区别、toRefs的解构应用场景以及unref的实用价值。
2026-03-23 10:38:07
524
原创 Vue3 + Pinia 实战深度解析
摘要： Pinia 是 Vue3 官方推荐的状态管理库，相比 Vuex 具备模块化、TS友好、轻量等优势。本文从原理、实战、优化三方面，讲解如何规范使用 Pinia： 核心差异：Pinia 抛弃 mutations，统一 actions，天然模块化，完美适配 TS 和组合式 API； 环境配置：通过插件实现状态持久化，简化注册流程； 实战示例：以用户模块为例，演示 state、getters、actions 的标准写法，支持同步/异步操作
2026-03-23 10:12:09
198
原创 Vue3 生命周期深度解析
Vue3生命周期深度解析：从原理到实战 摘要：本文深入剖析Vue3生命周期的核心机制，对比Vue2差异，揭示组合式API的设计本质。通过完整的执行时序图，详解setup、onMounted等关键阶段的工作原理，并提供生产级代码模板。重点包括：1) 生命周期与副作用调度模型的关系；2) 自动清理机制的原理；3) DOM操作的正确时机；4) 常见企业级问题的解决方案。特别强调：Vue3生命周期是函数式调度任务，与渲染流程深度绑定，不同于Vue2的实例阶段回调，正确理解这些差异是提升项目稳定性和性能的关键。
2026-03-23 10:11:23
217
原创 Vue3 组件通信全方案深度解析：从基础到工程化最佳实践
本文全面解析Vue3组件通信方案，从基础到高级提供完整解决方案。核心内容包括： 场景化选型口诀：根据不同场景推荐最佳通信方式，如父子组件用props/emit，跨层组件用provide/inject，全局状态用Pinia等。 通信方式全景图：详细对比8种主流方案的优缺点、适用场景和性能表现，提供快速选型参考。 基础通信详解：重点讲解props/emit的TS规范写法，列举4个常见错误及解决方案，并提供3个性能优化技巧。
2026-03-20 11:33:14
133
原创 Vue3 核心 API 深度解析：ref / reactive / computed / watch
本文深度剖析Vue3四大核心API(ref、reactive、computed、watch)的原理与实战应用。ref本质是包装对象，可处理任意类型；reactive基于Proxy代理，仅支持对象类型。computed具有惰性求值和缓存机制，而watch提供多种监听策略。文章详细解析了各API的设计原理、常见陷阱(如解构丢失响应式、异步问题等)和性能优化建议，并给出综合对比表和使用场景推荐。最后通过表单验证实战案例，展示如何合理组合这些API构建高性能Vue3应用。掌握这些核心知识，可帮助开发者从"
2026-03-20 11:07:19
712
原创 Vue2 迁移 Vue3 避坑指南
本文总结了Vue2迁移到Vue3的5个核心变化及避坑指南：1)API风格改用Composition API和<script setup>，逻辑更聚合；2)生命周期函数改名调整，如destroyed改为onUnmounted；3)全局API重构，不再使用Vue.prototype；4)v-model升级支持多绑定；5)响应式原理改用Proxy，解决Vue2的响应式缺陷。文章提供了详细代码对比和迁移工具推荐，帮助开发者无痛完成升级，同时强调逐步替换组件降低风险。
2026-03-20 10:52:42
355
原创 Commitizen 交互式提交：告别手写不规范 Git 信息，新手也能轻松达标
本文介绍如何通过Commitizen工具实现规范的Git提交。文章首先指出，即便配置了Commitlint等校验工具，开发者仍面临记混规范、反复修改等问题。Commitizen通过交互式引导，帮助开发者无需记忆格式即可生成符合Conventional Commits规范的提交信息。配置部分详细说明了安装核心依赖、设置适配器的方法，并推荐在package.json中集成配置。最后展示了完整的交互式提交流程，包括选择提交类型、输入影响范围和描述等步骤，实现"零记忆、零错误"的规范提交。该方案
2026-03-20 10:36:03
360
原创 Commitlint + Husky + lint-staged 工程化配置：让Commit规范+代码校验自动化落地
本文详细介绍了如何通过Commitlint、Husky和lint-staged实现代码提交自动化校验，确保团队协作中的规范落地。文章从工具作用、环境准备到分步配置，手把手教你搭建工程化工具链，实现提交前自动拦截不规范内容。核心步骤包括：安装依赖、配置Commitlint校验规则、设置Husky钩子关联Git流程，以及通过lint-staged高效校验代码。这套方案能有效解决人工规范执行难的问题，提升代码仓库质量和团队协作效率，适用于个人或团队项目直接使用。
2026-03-20 08:48:16
363
原创 Conventional Commits 规范详解（feat_fix_docs_refactor…）
本文详细介绍了Conventional Commits规范，旨在解决多人协作项目中Git Commit信息混乱的问题。该规范通过统一格式（类型+作用域+描述+正文/脚注）实现提交信息的结构化与语义化，提升代码审查、版本追溯和CHANGELOG生成的效率。核心内容包括：7种基础提交类型（feat/fix/docs等）、可选作用域、描述书写规范，以及突破性变更和Issue关联等高级用法。遵循此规范可使提交信息清晰统一，便于团队协作和自动化工具处理。
2026-03-19 14:56:27
313
原创 Vue3 组件通信利器：mitt 全面详解
本文详细介绍了在Vue3中使用mitt实现组件通信的完整方案。首先分析了mitt的核心概念，作为轻量级事件总线库，其基于发布-订阅模式实现跨组件通信。然后详细讲解了安装配置方法，推荐两种全局挂载方式：通过globalProperties或provide/inject。重点演示了基础用法，包括发布者emit发送数据、订阅者on接收数据、组件销毁时off取消监听等核心API的使用。通过实测代码展示了非父子组件通信的实现过程，并兼顾了Options API的用法说明。文中强调的关键点包括：事件名规范、取消监听防止
2026-03-19 14:37:23
422
原创 Git误操作急救手册（新手必看，避坑指南）
Git误操作急救手册摘要 本文整理Git常见误操作场景及解决方案，包含本地文件误删、分支操作错误和远程推送问题三大类，提供详细急救命令和操作步骤。 本地误操作： 未add误删文件：git checkout -- 文件名 已add未commit误删：先git reset HEAD再git checkout -- 提交信息错误：git commit --amend 误add文件：git reset HEAD 文件名 分支误操作： 切错分支未commit：用git stash暂存转移 误合并未commit：git
2026-03-19 14:14:42
377
原创 前端性能优化实战：把LCP从3.2s优化到0.8s的完整过程
还在被LCP过长、页面加载缓慢、用户流失率高困扰？本文以真实企业项目为例，拆解LCP从3.2s优化到0.8s的全流程，精准定位图片过大、JS/CSS阻塞、缓存缺失等共性问题，提供可直接落地的优化方案，含图片压缩、代码分割、HTTP缓存、CDN配置等实操细节，兼顾FID、CLS等指标，彻底解决前端性能瓶颈。
2026-03-19 13:56:25
372
原创 2026年还在手写CSS？这10个原生CSS新特性直接替代Tailwind复杂写法
还在为 CSS 优先级打架、嵌套混乱、响应式适配繁琐头疼？2026 年这些问题都能靠原生 CSS 解决！本文详解 10 个生产环境可用的原生 CSS 新特性，从样式隔离到组件级响应式，从现代颜色系统到复杂动画，手把手教你用原生 CSS 替代预处理器 / UI 框架，让样式代码少写一半。
2026-03-19 11:28:48
331
原创 高级信息系统项目管理师考点全拆解（第四版 + 第八版全覆盖）
备考高级信息系统项目管理师，最头疼的就是‘考点零散、版本混淆’？本文以第四版为基础、第八版为补充，拆解全模块核心考点，标注易错点、实用工具，不管是备考刷题、写论文，还是职场实操，一篇搞定，收藏起来慢慢看！
2026-03-18 15:04:13
321
原创 一文吃透 HTTP 状态码：从 1xx 到 5xx 全解析
本文全面梳理 HTTP 状态码从 1xx 到 5xx 的完整分类与含义，结合开发场景清晰解读每类状态码的用途、典型场景与最佳实践，重点区分 401/403、301/302/307/308 等易混淆状态码，并整理出后端、前端、运维日常高频使用的核心状态码与规范用法，是 Web 开发、接口调试、线上故障排查的实用速查指南。
2026-03-18 14:18:53
288
原创 深度解析 WebSocket DevTools 插件
WebSocket 实时通信调试长期面临建连细节难捕获、消息解析繁琐、异常场景难复现等痛点，传统工具难以覆盖全生命周期调试需求。本文深度解析 WebSocket DevTools 插件，从核心功能进阶用法、底层实现原理（API 重写 + 钩子注入）、5 个高频实战踩坑场景，到隐藏进阶技巧，全方位拆解插件如何解决调试痛点，帮助开发者穿透 WebSocket 黑盒，实现从建连、通信到断连的全链路管控，大幅提升实时通信开发与调试效率。
2026-03-18 10:50:10
389
原创 常用Git命令总结
Git（读音为/git/）是一个开源的分布式版本控制系统，凭借高效、灵活的特性，能够轻松处理从小型项目到大型项目的版本管理需求，是程序员日常开发中不可或缺的工具。整理了自己日常开发中高频使用的Git命令，按使用场景分类排版，标注关键细节和注意事项，新手可直接参考使用，后续会根据使用场景补充更多实用命令，也欢迎大家在评论区指正错误、分享补充～
2026-03-18 10:29:58
757
原创 告别冗余代码！ES2024_ES2025 实用新特性全解析
本文全面解析 ES2024 已落地与 ES2025 即将定稿的 JavaScript 实用新特性，包括 Promise 简化、原生数组分组、Unicode 正则增强、迭代器助手、不可变数组方法、Temporal 日期 API 等。所有特性均附真实业务场景与可运行代码，帮助前端开发者告别冗余代码，提升开发效率与代码健壮性。
2026-03-18 10:15:19
888
原创 关于vue + elementUI 的dialog弹窗清空弹窗内值的问题
近来比较繁忙，所以博客近期一直没有更新，今天就来和大家说说关于elementUI dialog弹窗清空值的问题在vue + elementUI项目中有时候会大量的用到弹窗这个组件，所以就对这个组件进行了统一封装。但是对于弹窗中的值的清空问题就有些麻烦了。当dialog 中嵌套的是form表单时，我们可以使用Element UI自带的清空form表单方法this.$refs.formData.resetFields(); //重置表单数据，清除校验信息或者手动的去重置清空表单数据this.
2021-06-22 16:02:29
6769
2
原创 Mac 解决向日葵被别人远程控制无法操作的问题
解决方案系统偏好设置->安全性与隐私->辅助功能先解锁????，然后勾选右边的SunloginClient_Desktop锁????上锁子重启向日葵如图：
2021-04-01 13:30:23
16299
原创 移动端字体大小适配问题
移动端字体适配var width = document.documentElement.clientWidth;var root = document.getElementsByTagName('html')[0]root.style.fontSize = width / 3.75 + 'px';window.onresize = function(){ var width = document.documentElement.clientWidth; var root = doc
2021-03-11 10:45:58
546
4
原创 vue中使用element ui的input做模糊查询的爬坑记录（二）
vue中使用element ui的input做模糊查询的爬坑记录（二）在之前的那篇博客中我介绍了input做模糊查询的时候出现由v-for生成多个组件的时候怎样传index的问题。解决了大部分问题但是在是用的时候还是出现了其他bug所以在这里在记录下官网给出的例子是这样的：在template里面：<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
2021-01-13 20:42:20
650
原创 elementui 的省市区级联选择器数据回显问题
elementui 的省市区级联选择器数据回显问题关于elementui的级联选择器数据回显问题，找了好多资料也没解决。今天在这记录下级联选择器在编辑的时候数据回显的问题。这里是在npm找到的一个省市区的数据 https://www.npmjs.com/package/element-china-area-data安装npm install element-china-area-data -S使用这里引入的时候可以按需引入没有必要全部引入import { provinceAndCityD
2020-12-31 18:00:53
6421
原创 JavaScript Array 方法集合
JavaScript Array 学习方法记录前端在开发中对于Array的使用场景非常多，很多时候很容易忘记，还得百度（老手请绕开）。 所以今天就对这里整体进行一个总结，希望大家看完本文可以有所收获。如果喜欢的话可以点波赞/关注，支持一下。本文前一部分内容根据w3school整理，具体还是以w3school上的为准，参考地址http://www.w3school.com.cn/jsref/jsref_obj_array.asp数组的创建Array()是构造函数。参数参数 size 是
2020-12-29 15:35:46
287
原创 vue初学干货
vue初学干货本篇文章是一写vue的知识点，只适合刚开始接触vue的同学用来学习参考，主要还是要参考vue官网及vue APIVue的两个核心 数据驱动：ViewModel，保证数据和视图的一致性。 组件系统：应用类UI可以看作全部是由组件树构成的。在vue中is的使用场景 改变html标签的默认规则，比如ul里放li，dl里放dt等， 动态切换组件： <component v-bind:is="currentView"></component>
2020-12-29 11:27:17
196
原创 css鼠标经过从不同角度的过度动画案例
css鼠标经过从不同角度的过度动画案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
2020-12-28 18:11:03
293
原创 js初学者for循环练手题
js初学者for循环练手题1+1/2+1/3…+1/20 var sum = 0; for(var i=1; i<=20; i++) { sum = sum + 1/i; } console.log(sum);1-1/2+1/3…-1/100 var sum; var sum1 = 0; var sum2 = 0; for(var i=1;i<=99;i=i+2){ sum1 = sum1 + 1/i; } for(var i=2;i&
2020-12-28 17:58:23
1512
原创 关于elementui的TimePicker、DatePicker、DateTimePicker再开发使用中遇到的问题
关于elementui的TimePicker、DatePicker、DateTimePicker再开发使用中遇到的问题最近在vue项目中使用elementui 的TimePicker、DatePicker、DateTimePicker这三个组件的时候，我发现使用范围选择的时候选择器中间的那个字有一少半显示不出来，为此在这记录下这个问题官网例子<template> <div class="block"> <span class="demonstration"&g
2020-12-28 15:55:33
1493
1
原创 纯css的波浪效果
纯css的波浪音节<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D
2020-12-28 13:52:28
213
原创 基于css动画动态跳动的心
基于css动画动态跳动的心<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D
2020-12-28 13:45:03
266
原创 基于原生js实现的九宫格拖拽
使用原生js写的选项卡嵌套<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; list-style: none; } #warp { width: 80
2020-12-28 13:32:22
434
原创 JavaScript数组去重
JavaScript原生数组去重这是一个适合刚刚接触js的同学用来练手学习的一个数组去重的方法，有原生的写法和方法的封装。数组在我们平时工作中还是经常会遇到的所以这个去重还是很有必要牢记的原生写法<script> var arr = [1,2,3,4,1,2,3,100,200,100,1,1,2,2,100,200,300,400]; var obj = {}; for (var i = 0; i <arr.length; i++) {
2020-12-28 12:00:36
158
一个剪刀石头布小游戏的微信小程序
2020-11-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人