- 博客(84)
- 收藏
- 关注
原创 二次封装 el-dialog 组件:打造更灵活的对话框解决方案
在 Vue 项目中,Element UI 的 `el-dialog` 是一个非常实用的对话框组件。但在实际开发中,我们经常会遇到需要重复设置对话框属性、处理相同逻辑的情况。通过二次封装,我们可以创建一个更灵活、更易用的对话框组件,提高开发效率并保持代码一致性。
2025-05-13 18:53:23
261
原创 深入理解 JavaScript 中的 FileReader API:从理论到实践
在现代 Web 开发中,处理用户上传的文件是一个常见的需求。无论是图片预览、文档解析还是数据导入,都离不开对文件内容的读取和操作。JavaScript 的 `FileReader` API 正是为解决这类问题而生的工具。本文将详细介绍 `FileReader` 的核心功能、使用场景,并通过实际案例展示其强大之处。
2025-05-11 20:19:22
402
原创 Vue3简易版购物车的实现。
本文展示了一个使用Vue 3和TypeScript编写的简单商品管理系统。代码包括一个表格,用户可以新增、修改和删除商品,并实时计算商品总价。通过v-model实现双向数据绑定,computed属性用于搜索过滤和总价计算。用户可以输入商品编号、名称、价格和数量来新增商品,或通过点击按钮修改现有商品信息。删除功能通过splice方法实现。整体代码简洁明了,展示了Vue 3的基本用法。
2025-05-11 10:34:47
134
原创 H5 移动端适配最佳实践落地指南。
在移动端开发中,适配不同设备屏幕尺寸和分辨率一直是一个核心挑战。作为一名前端工程师,我在多个项目中积累了丰富的 H5 移动端适配经验。
2025-05-09 18:39:49
881
原创 Vue3项目中如何实现网页加载进度条。
在网页开发中,加载进度条是一种常见的用户体验优化手段,它可以让用户直观地感知页面的加载状态,减少等待的焦虑感。本文将介绍如何使用 Vue.js 实现一个网页加载进度条,并分享一些优化技巧。
2025-05-09 18:20:27
292
原创 JavaScript 对象引用与值传递的奥秘
作为前端工程师,我经常会遇到一些看似奇怪的行为,尤其是在处理对象和数组时。最近我在项目中遇到了一个有趣的现象,让我对 JavaScript 中的引用和值传递有了更深刻的理解。
2025-05-06 18:30:59
397
原创 网址无法正常打开,居然跟DNS解析有关,咋解决?
当遇到特定网址无法正常打开,而其他网站可以正常访问时,通常可以从本地配置、网络环境、网站服务端等多个维度进行排查和解决。以下是详细的解决步骤和分析。
2025-05-05 12:19:45
870
原创 Vue3 中封装函数实现加载图片&加载失败兜底方案。
通过本文的代码示例,我们实现了在 Vue3 中动态加载图片并处理加载失败的情况。这种方法简单易用,能够很好地满足实际开发中的需求。同时,通过结合 Vue3 的组合式 API,代码更加清晰和模块化。
2025-04-17 13:01:50
598
原创 Vue3中发送请求时,如何解决重复请求发送问题?
在开发过程中,重复请求发送问题可能会导致数据不一致、服务器压力增加或用户操作异常。以下是解决重复请求问题的常见方法和最佳实践:
2025-04-17 12:27:21
217
原创 Node做BFF中间层架构优化前端开发体验并提升系统整体性能。
在使用 Node.js 构建 BFF(Backend for Frontend)层架构时,核心思想是为前端应用(如 Web、移动端或桌面应用)提供定制化的 API 接口,将后端复杂的服务逻辑抽象化、聚合化,从而优化前端开发体验并提升系统整体性能。
2025-04-17 09:58:15
1105
原创 docker部署mysql后,客户端连接不上解决方案。
解决docker部署mysql容器成功后,navica连接不上,虚拟机无法正常Ping通。
2025-04-13 11:13:58
489
原创 让你方便快捷实现主题色切换(useCssVar)
使用 CSS 变量(CSS Custom Properties)实现主题色切换是一种高效且易于维护的方法。通过将主题颜色定义为 CSS 变量,你可以轻松地在不同主题之间切换,而无需修改多个 CSS 规则。
2025-04-12 19:07:20
306
原创 Vue3内置组件Teleport
在 Vue 3 中,<Teleport> 是一个内置组件,用于将模板的一部分内容渲染到 DOM 中的其他位置,而不是当前组件的默认挂载点。这对于实现模态框、通知、工具提示等需要脱离父组件层级进行渲染的场景非常有用。
2025-04-12 17:09:39
366
原创 Webpack压缩css/js代码减少包的体积大小
在使用 Webpack 构建前端项目时,压缩 CSS 和 JavaScript 代码是优化性能、减少包体积的重要步骤。以下是实现这一目标的详细方法。
2025-04-05 15:03:19
205
原创 Webpack代码分包常见策略-优化用户体验
在 Webpack 中,代码分包(Code Splitting)是一种优化技术,用于将代码分割成多个独立的包(chunk),以便按需加载,减少初始加载时间,提高性能。以下是 Webpack 代码分包的常见实现方式和策略:
2025-04-05 12:46:26
321
原创 Webpack中loader的作用。
Webpack中各种loader的作用。比如css-loader,less-loader,style-loader,vue-loader等等
2025-04-04 18:25:20
459
原创 Vite打包优化-抽离第三方包优化
在使用 Vite 构建项目时,抽离第三方包是一种常见的优化手段,可以减少主包体积、提高浏览器缓存利用率以及加快页面加载速度。以下是具体的优化方法和步骤:
2025-04-04 12:27:34
344
原创 Vue3中Suspense&defineAsyncComponent异步组件的应用场景。
Vue3中Suspense&defineAsyncComponent异步组件的应用场景。
2025-03-23 12:08:00
393
原创 前端代码规范,代码风格的最佳实践落地。
集成CommitLint,EsLint,Prettier,StyleLint,LintStaged保证代码规范风格的统一。
2025-03-22 09:46:35
913
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人