- 博客(396)
- 收藏
- 关注
RSS订阅原创 那些年你踩过的前端“坑”?
本文总结了前端开发中12个常见问题及解决方案：1）内存泄漏（定时器/事件监听清理）；2）路由权限控制（动态加载/守卫逻辑）；3）HTTP请求管理（取消机制）；4）国际化（动态加载语言包）；5）WebSocket（断线重连）；6）组件通信（provide/inject）；7）性能优化（懒加载/虚拟滚动）；8）浏览器兼容性（polyfill）；9）构建部署（环境配置/代码分割）；10）用户体验（loading/错误提示）；11）状态管理（Vuex）；12）安全性（XSS/CSRF防护）。建议通过规范开发流程、工
2025-07-08 14:35:13
682
原创 Element ui DateTimePicker 日期时间选择器选择时分秒修改鼠标悬停背景颜色
摘要：针对时间选择器组件样式问题，通过CSS代码优化背景色和交互效果。修改后统一采用白色背景，去除了灰色背景的突兀感，并优化了hover状态样式。新增代码去除了上下分割线，确保视觉统一性。关键修改包括设置默认背景色为白色，以及调整禁用状态和激活状态下的样式表现。这些调整提升了组件的美观性和用户体验。
2025-07-07 11:05:22
150
原创 Vue运行项目报错Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:interna
摘要：Node.js v22.12.0版本因使用OpenSSL 3.0导致与旧版webpack不兼容，引发"digital envelope routines::unsupported"错误。提供4种解决方案：1）设置环境变量NODE_OPTIONS="--openssl-legacy-provider"（推荐）；2）修改package.json脚本；3）降级至Node.js 16/18版本；4）升级项目依赖。建议优先采用方案1临时解决，再考虑方案3长期使用，因Nod
2025-07-03 14:00:12
182
原创 前端代码优化规范及实践指南
本文总结了前端开发中的代码优化规范与实践指南，针对"屎山代码"问题提出系统解决方案。主要内容包括：1）代码结构优化，如模板重复代码处理、常量定义规范；2）方法优化技巧，包括复杂条件判断拆分、路由配置优化；3）样式优化建议，避免内联样式和过度嵌套；4）命名与注释规范；5）性能优化方案，如组件拆分、依赖清理等。文章强调通过配置化、模块化、类型安全等手段提升代码质量，同时建议建立自动化检查、测试和文档体系，最终实现代码可读性、可维护性和性能的全面提升。
2025-07-02 16:16:14
582
原创 Tailwind CSS 配置正确,也没有报错，但是样式没有生效（解决~）
TailwindCSS样式不生效时，重启服务器通常能解决问题。这主要由于：1）浏览器和服务器缓存了旧CSS；2）PostCSS需要重新处理文件；3）配置文件修改未被监听；4）Node.js模块缓存未更新。建议修改配置后重启服务，定期清除npm缓存，检查CSS加载情况。使用开发者工具查看网络请求和强制刷新也能帮助排查问题。通过重启强制重新加载所有配置和文件，TailwindCSS样式即可正常显示。
2025-06-30 14:38:05
407
原创 Vue+element 日期时间组件选择器精确到分钟，禁止选秒的配置
摘要：本文介绍了Element UI日期时间选择器的两种配置方式。第一种配置精确到分钟，通过设置format和value-format为"yyyy-MM-ddHH:mm"，并使用CSS隐藏秒选择器(.el-time-spinner__wrapper:nth-child(3))。第二种配置精确到小时，设置格式为"yyyy-MM-ddH"，并通过CSS隐藏分钟和秒选择器(.el-scrollbar:nth-of-type(2))。两种方式都使用了type="da
2025-06-30 11:11:29
374
原创 Vue2 引入 Tailwind CSS 完整指南
本文详细介绍了在Vue2项目中集成TailwindCSS的完整流程，包括安装配置步骤、基础使用方法和常见问题解决方案。主要内容：1. 安装TailwindCSS及相关依赖，创建配置文件和PostCSS配置；2. 在CSS文件中引入Tailwind指令并正确配置内容扫描路径；3. 展示布局、间距、颜色、字体和边框等常用类的使用示例；4. 讲解响应式设计和状态变体的应用技巧；5. 提供Vue组件中使用Tailwind的最佳实践。文章还涵盖了常见问题处理方法和生产环境优化建议，帮助开发者高效构建现代化UI界面。
2025-06-27 13:37:08
1221
原创 Vue+el-admin管理后台，页面长时间运行，浏览器报：‘喔唷,崩溃啦！ ’，定时器代码优化解决
【摘要】 本文针对Vue项目中因定时器和未取消的API请求导致的内存泄漏及页面卡顿问题，提出了一套系统化解决方案。通过分析发现痛点主要在于：1）组件销毁时未清理定时器；2）频繁请求缺少取消机制；3）全局对象引用阻碍垃圾回收。核心方案包括： 全局封装axios：支持页面级请求取消，优化错误拦截逻辑； 开发requestCancelMixin：自动管理定时器和pending请求，组件销毁时主动清理资源； 规范API调用：提供safeApiCall方法封装，简化异常处理流程。 实施后显著提升系统稳定性，解决了内存
2025-06-26 14:19:30
975
原创 crud.js文件报错Cannot read properties of undefined (reading ‘vm‘)
【摘要】分析crud.js中findVM方法的报错问题，当this.vms[i]为undefined时，访问this.vms[i].type会报错。解决方法是增加健壮性判断，修改为if(this.vms[i]&&this.vms[i].type===type)。建议在src/components/Crud/crud.js文件中相应位置添加该条件判断，即可避免"Cannot read properties of undefined"的错误。这种防御性编程能有效提升代码稳定性
2025-06-26 11:19:16
303
原创 打造属于自己的轻 NAS：我开发了一款 macOS + 移动端文件同步神器！
《打造轻量级私人NAS：手机3秒上传文件回家》为解决日常文件传输痛点，作者开发了一款轻NAS工具，由macOS服务端和移动客户端组成。特色包括：无需复杂配置的自动穿透公网功能、手机端3秒极速上传、本地存储保障数据隐私，支持照片/文件分类保存及临时分享。该方案特别适合拥有闲置Mac设备的用户，提供比传统NAS更简便、比云盘更私密的文件管理体验。目前正在测试阶段，未来计划扩展同步备份等功能。项目聚焦解决"最后一公里"的文件传输问题，让远程上传像发微信一样简单便捷。
2025-06-24 22:35:09
1391
原创 安装Tailwind，npx tailwindcss init 报错【找不到命令：tailwindcss】
摘要：在Windows系统安装TailwindCSS时，V4.x版本存在兼容性问题，导致.bin目录下无法生成tailwindcss.cmd文件，使初始化命令失效。解决方案是卸载当前版本，安装3.x稳定版本（npm install -D tailwindcss@3），然后用npx tailwindcss init命令即可正常初始化配置。最新V4.0.14版本存在安装失败风险，建议改用兼容性更好的3.x版本。
2025-06-24 16:22:28
610
原创 前端组件化设计原则
摘要 前端组件化是一种将UI拆分为独立可复用单元的编程思想，已成为复杂前端项目的共识。大厂通常将组件分为四层：基础组件（如按钮、输入框）、业务组件（如二维码组件）、区块（功能模块组合）和模块（完整页面）。优秀组件设计遵循六大原则：1)单一职责，保持粒度适中；2)通用性，避免重复代码；3)封装性，隐藏实现细节；4)组合性，解耦复杂功能；5)区分纯/非纯组件，隔离副作用；6)可测试性，反映设计质量。同时强调代码命名应富有语义，提升可维护性。
2025-06-24 15:26:28
895
原创 用一个更生动、更系统的方式，来深入讲解 Vue 的生命周期函数（详解）
Vue组件生命周期详解 Vue组件从创建到销毁会经历8个关键阶段，通过生命周期钩子函数可以精确控制各阶段的操作。主要阶段包括：beforeCreate（实例初始化）、created（数据就绪）、beforeMount（模板编译）、mounted（DOM挂载）、beforeUpdate（数据更新前）、updated（DOM更新后）、beforeDestroy（销毁前清理）和destroyed（实例销毁）。最佳实践：数据请求应在created中发起，DOM操作须在mounted后进行，定时器等资源需在befor
2025-06-23 15:19:56
789
原创 【Vue调用方法】 created和mounted 调用时机对比（大全）
Vue生命周期钩子created和mounted的核心区别在于DOM是否可用。created阶段适合进行数据初始化、API请求等非DOM操作；mounted阶段才能安全进行DOM操作和第三方库初始化。最佳实践是将所有数据请求放在created，仅DOM相关操作放在mounted。使用this.$nextTick可在数据更新后访问新DOM。注意在SSR环境中mounted不会执行。合理选择生命周期钩子能提升性能并避免错误。
2025-06-23 13:25:33
651
原创 Cannot read properties of undefined (reading ‘setCheckedKeys‘)【做下判空处理就解决啦】
这篇文章描述了如何解决一个JavaScript报错问题。报错显示无法读取未定义对象的'setCheckedKeys'属性。开发者通过定位到问题代码行，发现是未对this.$refs.group进行判空处理导致的错误。解决方法是在调用setCheckedKeys方法前增加了if(this.$refs.group)的条件判断，确保对象存在时才执行操作。这种处理方式有效避免了报错的发生，且不影响原有功能逻辑。该案例展示了前端开发中常见的空值检查模式，提醒开发者在操作DOM元素或组件引用时要注意进行防御性编程。
2025-06-19 15:05:56
159
原创 el-dropdown自定义图标踩坑！Cannot set property className of #＜SVGElement＞ which has only a
摘要： 开发中因使用自定义SVG图标导致Element UI的Dropdown组件出现异常，表现为数据无法勾选和回显。控制台报错显示与className属性设置冲突。排查发现注释自定义图标后功能恢复正常。解决方案是将自定义SVG图标替换为Element内置图标el-icon-caret-bottom，问题解决。该案例提醒开发者注意第三方组件与自定义SVG的兼容性，类似问题可优先检查图标相关代码。（149字） 关键词： Vue、Element UI、Dropdown组件、SVG图标、className报错
2025-06-19 14:48:24
227
原创 Echarts +柱状图数据标签文字显示在内部
在ECharts中，可以通过配置series.label属性实现文字显示在柱状图内部。关键参数包括position: 'inside'
2025-06-17 09:56:07
336
原创 搭建前端项目 Vue+element UI引入 步骤 （超详细）
本文介绍了搭建Vue+ElementUI项目的完整流程：首先安装Node.js和Vue CLI工具，通过Vue CLI创建项目（推荐使用淘宝镜像加速）。然后详细说明了两种安装ElementUI的方式：npm全局安装或按需引入（需配置babel插件），以及使用vue add命令通过插件安装。最后在项目中测试ElementUI组件，完成项目基础搭建。整个过程包含了环境准备、项目初始化、UI库集成等关键步骤，为后续开发奠定了基础。
2025-06-13 16:07:40
1215
原创 Vue 跳转页面，第一次进页面，会出现样式混乱，刷新后即恢复正常（问题已解决）
文章记录了一个页面布局问题的排查过程，发现页面跳转后左右两侧底部不对齐但刷新后正常。通过逐步排查路由样式加载、scoped属性、网络问题后，最终发现是因父组件.nstAudio未设置height:100%导致。解决方法是为父组件添加高度样式，提醒开发者在编写样式时要注意细节，避免类似耗时问题的发生。
2025-06-12 14:02:20
329
原创 使用cursor 编辑器开发 Vue项目，配置ESlint自动修复脚本，解决代码不规范引起的报错无法运行项目问题
使用cursor 编辑器开发 Vue项目，配置ESlint自动修复脚本，解决代码不规范引起的报错无法运行项目问题
2025-06-04 14:33:07
652
原创 npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
VSCode 终端显示“npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本”，运行 npm -v 也是一样的。如果爆红说明没有设置成功。如图：依次执行以下命令。成功后你再在终端使用。
2025-06-04 10:12:23
1193
原创 Vue3+Element Plus 项目流程图组件vue flow使用
vue3+element Plus 使用vue flow 实现项目流程图功能
2025-06-04 10:11:09
717
原创 Vue3 （数组push数据报错） 解决Cannot read property ‘push‘ of null报错问题
Vue3 （数组push数据报错） 解决Cannot read property ‘push‘ of null报错问题
2025-06-04 09:55:20
292
原创 Vue+css实现扫描动画效果（使用@keyframes scan）
Vue+css实现扫描动画效果（使用@keyframes scan）annimation
2025-05-23 14:10:47
545
1
原创 Vue+eElement ui el-input输入框 type=number 输入无效。赋值输入框也不显示（问题已解决）
做一下记录，哎 因为这个问题 排查了好久，才发现原来是这个小知识点卡住啦。因为我这个输入框是在弹框中，所以每次打开弹框都做了一次清空操作。破坏了响应式，导致后续赋值视图不更新。所以猜测是在 init()的时候 有。只要保证 form 对象结构不变，这样的赋值，这会导致。后输入框就会自动更新。Vue 的响应式丢失。不会自动更新到视图。
2025-05-20 15:59:50
541
原创 修改element UI 分页组件样式（解决样式不生效问题）
修改element UI 分页组件（Pagination ）样式（解决样式不生效问题）
2025-04-22 16:14:04
333
原创 Vue项目解决input密码框选择浏览器提供的“已保存账户”密码，输入框白色背景色无法去除问题
Vue项目解决input密码框选择浏览器提供的“已保存账户”密码，输入框白色背景色无法去除问题
2025-04-18 10:57:57
254
1
原创 Vuue2 element-admin管理后台，Crud.js封装表格参数修改
Vuue2 element-admin管理后台，Crud.js封装表格参数修改
2025-04-03 10:21:07
288
原创 使用Elementor Pro制作网站的表单（From）和弹出框Popup
使用Elementor Pro制作网站的表单（From）和弹出框Popup
2025-04-03 09:26:10
377
原创 Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题
Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题
2025-03-24 15:01:43
2765
原创 解决报错[plugin:vite:import-analysis] Failed to resolve import “@/utils/validate“ from “src/components/S
解决报错[plugin:vite:import-analysis] Failed to resolve import "@/utils/validate" from "src/components/S
2025-03-24 13:27:02
1824
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人