- 博客(137)
- 收藏
- 关注
RSS订阅原创 油猴脚本污染全局 URL 导致 Vite 报错问题修复
摘要：本文介绍了一种解决浏览器插件污染全局URL导致Vite开发报错的零侵入方案。该方案仅作用于开发环境，无需修改node_modules，升级Vite无感知，团队协作时只需提交插件文件即可。相比直接修改Vite源码的方案，这种插件方式更优雅且易于维护。
2026-01-05 11:04:35
405
原创 【:has()】 CSS关系性伪类介绍及实战
摘要：本文介绍了CSS选择器:has()的实用技巧与应用场景。文章详细讲解了:has()的语法规则，包括后代选择、子节点选择、兄弟选择等，并提供了10个实用场景代码示例。也讨论了性能优化和浏览器兼容性方案，大幅提升了开发效率和用户体验。
2026-01-05 11:04:12
692
原创 【vue3】企业级项目搭建：新版本项目创建及配置指南——包括最新版本项目创建、校验规则、router模块化配置（无需再手动配置）、element-plus配置（按需引入+主题配置）……
本文详细介绍了基于Vue3的企业级项目搭建方案，内容包括：项目初始化配置、代码规范工具(ESLint+Prettier)集成、全局组件自动注册、路由模块化管理、Pinia状态管理、CSS原子化方案(Unocss/Tailwind)、Element Plus按需引入与主题定制、ECharts可视化组件集成、Axios网络请求封装及跨域配置等。文章提供了完整的配置代码示例和最佳实践，涵盖项目开发的各个关键环节，适合作为Vue3企业级项目的开发模板参考。
2025-12-17 10:59:42
948
原创 tailwindcss：安装避坑，从 0 到项目跑通
本文详细介绍了TailwindCSS v3.4.x的安装配置流程及优化技巧。首先说明了官方文档在实际操作中可能遇到的问题，强调了核心依赖tailwindcss、postcss和autoprefixer的重要性。接着详细讲解了配置文件的生成和修改方法，包括自定义颜色配置和效果验证。文章还分享了优化方案，提供了一个cs工具方法来提升类名编写的可读性。最后推荐了VSCode插件TailwindCSS IntelliSense来增强开发体验。
2025-12-17 09:17:01
1132
原创 【谷歌脚本开发】一、企业级Tampermonkey插件深度进阶｜Vue3 + Vite + GM_api 全链路实战（附 Gitee 模板）
本文介绍了使用Vue3和Vite开发Tampermonkey插件的完整流程。开箱即用！
2025-12-16 12:29:11
949
原创 【谷歌脚本开发】Tampermonkey插件 零基础入门（附源码）
油猴(Tampermonkey)是一款免费的浏览器扩展，能通过脚本修改网页功能。该篇文章主要是入门！
2025-12-16 12:17:39
1062
原创 【inspira-ui】最近很火的动画组件库：在vue3项目使用全流程
《Inspira-UI动画组件快速上手指南》介绍了基于TailwindCSS+VueUseMotion的动画组件集Inspira-UI的安装配置与使用流程。文章强调Inspira-UI与传统组件库不同，需要先配置环境（安装tailwindcss-animate等依赖并配置主题样式），然后直接复制官方文档中的组件代码到项目。
2025-12-16 12:16:01
832
原创 【canvas】前端Canvas签字组件实现以及性能优化实战，手把手带领大家提升用户体验
签字功能看似简单，实则暗藏“坑”：笔迹锯齿、延迟卡顿、兼容性问题……本文将带你深入Canvas签字组件的优化之路，从性能提升到视觉打磨，打造丝滑如纸的签字体验！
2025-12-15 10:52:12
1136
原创 前端获取浏览器缩放百分比！到底能不能“拿到”?一次说透 devicePixelRatio、系统 DPI 与网页缩放！
本文分析了前端获取显示缩放比例的两种方式，文章指出系统DPI变化会影响devicePixelRatio但不改变网页缩放，而Ctrl++调整网页缩放时devicePixelRatio会同步变化。提供了实测代码，并提醒注意侧边栏导致的误差、移动端兼容性问题以及非整数DPR的处理方法。
2025-12-15 10:41:48
245
原创 【案例分享】前端跨窗口/标签页通信经典案例！
摘要：本文探讨了音乐播放网页中的智能窗口控制技术。文章提供了完整的前端实现代码，包括音乐列表页和播放页的交互逻辑，同时讨论了浏览器安全机制对自动播放的限制及可能的解决方案。
2025-11-29 16:46:39
435
原创 【技术分享】前端跨窗口/标签页面通信：掌握以下几种方法，提升用户体验（附带常用场景以及典例）
本文介绍了前端跨标签页通信的7种实现方法及其适用场景。文章通过具体代码示例以及典例，帮助开发者根据实际需求选择最适合的跨标签通信方案，提升应用性能和用户体验。
2025-11-29 16:33:48
1240
原创 【visibilitychange】：获取当前页面可见性，深入解析，提升网页性能与用户体验的关键事件
本文深度介绍了visibilitychange事件在网页开发中的具体应用，以及其原理、场景、细节等等
2025-10-13 09:06:41
1189
原创 关于navigator.mediaDevices为undefined，获取不到媒体权限的问题
本文分享如何处理遇到navigator.mediaDevices的报错的问题
2025-10-13 09:05:36
633
原创 【UnoCSS快速上手】：安装、配置与优化，以及遇到的问题
【UnoCSS快速上手】：安装、配置与优化，以及遇到的问题！手把手带大家配置完成并使用
2025-09-20 23:50:38
1772
原创 前端实现一个星空特效的效果（实战+讲解）
本文介绍了使用Sass和CSS3实现星空特效的方法。通过创建多层div元素，利用Sass函数动态生成随机分布的星星（box-shadow），并添加向上移动的动画效果。近景层星星较大、移动较快，远景层星星较小、移动较慢，形成视觉深度。使用::after伪元素解决动画留白问题，同时添加渐变色文字标题。完整代码可直接复制使用，包含5个星空层和文字特效，通过调整参数可自定义星星数量和动画速度。
2025-09-20 22:33:51
395
原创 前端通过地址生成自定义二维码实战（带源码）
本文介绍如何使用qrcode.js实现前端二维码生成器。通过封装Vue组件，只需传入地址即可生成二维码，支持自定义尺寸和颜色配置。组件基于qrcode.js无依赖库开发，支持多浏览器，可轻松集成到项目中。文中提供完整代码示例，包括二维码生成、弹窗展示等功能，并建议可扩展输入框地址校验等增强功能。该方案简单易用，适用于各类需要二维码展示的前端场景。
2025-09-15 21:05:00
582
原创 CSS视差旋转动效实战
本文介绍如何使用CSS实现视差旋转动效，提升网页高级感。通过网格布局创建3x3容器，为5个子项分配不同区域。使用CSS动画让容器和图片分别进行正反360度旋转（8秒/圈），形成视差效果。核心代码包括网格模板定义、图片样式调整和旋转动画关键帧设置，实现简单但视觉效果突出的动态展示。
2025-09-15 21:04:18
401
原创 【常见方法】数字魔法：用三行js代码优雅实现千分符格式化
在处理大数字时，可读性是一个常见的痛点。本文介绍了一种优雅的解决方案，仅用三行代码实现千分符格式化，让数字瞬间变得清晰易读。通过正则表达式的巧妙应用，这段代码能够处理整数和带小数的数字，并支持多种应用场景，如金融数据展示和统计报表。文章详细解析了代码的逻辑，并展示了如何通过简单的修改扩展其功能。无论你是前端开发者还是数据分析师，这段代码都能为你的项目增添一份专业感，同时提升数字的可读性和用户体验。
2025-04-12 17:57:18
522
原创 【组件封装】致敬 Ant Design：vue用原生代码打造一个 Tab 组件，不输专业级框架！(满足基本功能，去掉antd造成tab抖动、闪动的动画)
用原生代码能不能打造出一个既炫酷又实用的 Tab 组件!开箱即用!!
2025-04-09 09:20:23
1474
原创 【组件封装-优化】vue+element plus:二次封装select组件，实现下拉列表有分页、自定义是否可搜索的一系列功能
vue+element plus:二次封装select组件，实现下拉列表有分页、自定义是否可搜索的一系列功能
2025-04-08 14:46:08
1183
原创 iframe: 通过postMessage实现父子页面通信
在前端开发中，跨域是一个常见的问题，由于同源策略的限制，浏览器不允许在不同源的页面之间直接进行通信。解决跨域问题有多种方式，其中一种常用的方式是使用postMessage。它是HTML5引入的一种跨文档通信的机制，可以在不同的窗口或框架之间传递数据，即使这些窗口或框架不属于同一个源。本文将介绍改方法的使用与场景
2025-03-10 15:34:42
2512
原创 【组件封装】vue3拖拽排序： vuedraggable 的使用方法（正常数据的基本使用与树结构数据递归使用）
【组件封装】vue3拖拽排序： vuedraggable 的使用方法（正常数据的基本使用与树结构数据递归使用）
2024-08-04 17:29:09
3127
1
原创 vue3+vite从零架构：写组件、构建、打包并上传个人前端组件库至私有npm仓库最终在自己项目中下载并使用（超详细的流程，小编已实现）
vue3+vite从零架构：写组件、构建、打包并上传个人前端组件库至私有npm仓库最终在自己项目中下载并使用（超详细的流程，小编已实现）
2024-07-14 16:35:54
4723
3
原创 【TypeScript 类报错】Property ‘name‘ has no initializer and is not definitely assigned in the constructor
Property 'name' has no initializer and is not definitely assigned in the constructor 报错解决
2024-07-03 14:12:05
5661
原创 vue2+webpack 和 vite+vue3 配置获取环境变量（补充）
继nginx后内容的补充：vue2+webpack 和 vite+vue3 配置获取环境变量
2024-06-24 13:30:50
1031
原创 vite：配置打包后js的文件名，解决更新后浏览器缓存问题(了解浏览器的强缓存与协商缓存)
vite：配置打包后js文件名，解决更新后浏览器缓存问题，并了解浏览器的强缓存与协商缓存
2024-06-24 11:07:24
3280
原创 vue：vue2与vue3如何全局注册公共组件（包括涉及到的相关方法函数的讲解）
vue：vue2与vue3如何全局注册公共组件（包括涉及到的相关方法函数的讲解），包括require.context()、import.meta.glob()和import.meta.globEager()方法
2024-06-21 15:52:58
1392
1
自定义描点定位组件的数据
2024-10-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人