- 博客(144)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 Vue 打包优化之 externals 抽离公共的第三方库
使用 @vue/cli 脚手架构建的 Vue 全家桶项目，默认配置下，打包后会把 vue、vue-router、axios、vuex、element-ui、echarts 等公共库打包在一起，导致基础 chunk、vendor 包体积特别大，有时一个文件能达到 3-5MB，这会大大影响首次加载速度。因此需要抽离第三方公共库，配合使用 CDN 加速。
2022-11-29 15:10:07
3171
2
原创 努力一周，开源一个超好用的接口Mock工具——Msw-Tools
从零开发了一个灵活无依赖，且集成简单的数据接口 Mock 工具——Msw-Tools，已开源到 NPM。Msw-Tools（Mock Service Worker Tools）是一个基于 Msw.js 和 Svelte 构建的数据 Mock 工具，用于前后端接口数据联调，方便开发者在不同数据、不同场景下进行Msw-Tools（Mock Service Worker tools）是一个基于 Msw.js 和 Svelte 构建的数据Mock 工具，用于前后端接口数据联调，和不同数据、不同场景的功能测试。
2022-09-28 17:34:46
2342
原创 移动端echarts手动控制tooltip和axisPointer的展示隐藏
在移动H5使用了 ECharts 开发可视化图表，遇到一个特殊需求：折线趋势图中需要默认展示最后一个坐标轴对应的数据，也就是主动触发 tooltip 的展示。
2022-08-18 02:30:00
5754
3
原创 Nginx反向代理WebSocket服务连接报错：WebSocket connection to “wss://xxx/xxx“ failed
最近使用 node.js 搭建 WebSocket 服务，在本地测试 connection 都是正常，于是部署到 Linux 服务上，需要用 Nginx 来反向代理 WebSocket 服务。浏览器控制台报错：WebSocket connection to 'wss://tiven.cn/ws/xxx' failed:，经过一番折腾，终于解决了这个报错。...
2022-08-02 17:14:56
38949
12
原创 SolidJS——前端新秀框架，性能直逼原生JS
SolidJS 是什么？SolidJS是一个声明式、高效且灵活用于构建用户界面的 JavaScript 库。 Solid 号称拥有 JSX 语法，类似于 React hook 的语法，你可以用现代化的开发方式，获得性能最快的代码。一、性能比较原生 JS 是 1， Solid 是 1.05， 比 Svelte 也快，React 跑到了 1.93 。如图：二、SolidJS 特点直接使用浏览器的 DOM, 没有 虚拟DOM， DOM diff 一整套算法 ，可以发现它编译出来的代码，他的 DOM
2022-01-28 18:24:36
12499
原创 使用 nodejs + zx 编写脚本更新本地 hosts
在日常的开发和运维工作中，我们经常需要修改本地的 hosts 文件来实现一些特定的网络配置，比如将某个域名指向特定的 IP 地址。而使用 Node.js 结合 zx 工具可以让我们更轻松地编写和运行脚本来更新本地的 hosts 文件。
2024-03-26 17:06:37
685
原创 pnpm tauri icon 一键转换 icon
在使用 Electron、Tauri 等框架开发桌面应用时，需要为应用生成不同平台的图标，如：MacOS 中的 icon.icns、Windows 中的 icon.ico、Linux 中的 *.png 等类型图标，这里介绍一种简单快捷一键转换图标的方法。
2024-02-01 16:23:44
640
原创 解决H5中IOS手机底部被弹出键盘遮挡问题
在开发移动端的H5应用时，我们经常会遇到一个问题，就是在iOS手机上，当输入框获取焦点并弹出键盘时，键盘会遮挡住页面底部的内容，给用户带来不便。本文将介绍一种很巧妙的解决方案，通过滚动页面的方式，动态的将页面滚动到最底部，以确保底部区域不被键盘遮挡。
2024-01-31 17:33:35
587
原创 H5适配iOS顶部和底部安全区域
在移动端Web开发中，适配不同设备的屏幕是一个重要且挑战性的任务。对于iOS设备来说，这一任务尤为关键，因为自iPhone X起，苹果的设备引入了刘海屏、圆角等设计，这就要求开发者在Web页面中特别处理顶部和底部的安全区域。本文将介绍如何在H5应用中适配iOS设备的顶部和底部安全区域，包括对旧版iOS的兼容处理。
2024-01-31 16:14:28
2126
原创 禁止 ios H5 中 bounces 滑动回弹效果
在开发面向 iOS 设备的 HTML5 应用时，控制页面的滚动行为至关重要，特别是禁用在 Safari 中默认的滑动回弹效果。本文旨在提供一个简洁明了的解决方案，帮助开发者在特定的 Web 应用中禁用这一效果。
2024-01-30 11:34:36
1417
原创 vite + postcss-prefix-selector 增加统一作用域
在前端开发中，随着项目规模的扩大，特别是在使用 微前端 架构后，基座应用和子应用之间的样式冲突和作用域管理成为了一项挑战。为了解决这个问题，我们可以利用 Vite 构建工具和 PostCSS 插件 postcss-prefix-selector，通过增加统一的作用域前缀来有效地隔离样式，确保样式仅在特定组件或模块中生效。本文将详细介绍如何在 Vite 项目中使用 postcss-prefix-selector 插件，实现样式的统一作用域管理。
2024-01-30 11:32:52
1280
原创 Top-level await is not available in the configured target environment
当在使用 Vite 进行项目构建时，可能会遇到如下错误提示：ERROR: Top-level await is not available in the configured target environment。
2024-01-29 15:12:30
2677
原创 React + react-device-detect 实现设备特定的渲染
当构建响应式网页应用时，了解用户正在使用的设备类型（如手机、平板或桌面）可以帮助我们提供更优化的用户体验。本文将介绍如何在 React 项目中使用 react-device-detect 库来检测设备类型，并根据不同的设备显示不同的组件或样式。
2024-01-29 14:49:00
866
原创 Server-Sent Events（SSE）简单实现实时通信
Server-Sent Events（SSE）是一种基于HTTP的实时通信协议，它允许服务器向客户端推送信息。相比于传统的轮询方式，SSE 提供了更加轻量级和实时的通信机制。在本文中，我们将深入浅出地介绍如何简单实现 Server-Sent Events，以便在你的应用程序中实现实时通信。
2024-01-23 16:07:55
1004
原创 Next.js 导航和路由跳转
在构建现代化的 React 应用程序时，良好的导航和路由管理是至关重要的。Next.js 提供了强大的导航和路由系统，使得开发者能够轻松地实现页面之间的切换和传递数据。本文将深入介绍 Next.js 中的导航和路由跳转，帮助你更好地理解和应用这些功能。
2024-01-22 15:34:07
1186
原创 深入浅出：white-space 和 word-break 的作用
在前端开发中，排版和文本处理是不可忽视的一部分，而CSS属性中的 white-space 和 word-break 就是在处理文本时非常重要的两个属性。它们分别用于控制空白和单词的处理方式，对于实现良好的文本显示和排版效果至关重要。
2024-01-22 12:31:58
586
原创 使用 crypto-js 进行 AES 加解密操作
在前端开发中，数据的加密和解密是为了保障用户隐私和数据的安全性而常见的任务。AES（Advanced Encryption Standard）是一种对称密钥加密算法，被广泛用于保护敏感信息的传输和存储。本文将介绍AES加解密的基本原理，并结合 Crypto-JS 库提供的实例代码进行说明。
2024-01-19 19:26:08
1487
原创 React 实现 textarea 文本域自适应高度(autoSize)
在 React 应用中，有时需要一个文本域（textarea）能够根据输入的内容自动调整其高度。这在创建具有良好用户体验的表单和界面时非常有用。本文将介绍如何使用 React 来实现这一功能。
2024-01-19 10:39:04
765
原创 纯 JavaScript 生成UUID和随机MD5值
在开发中，我们经常需要生成唯一的标识符或随机的哈希值。在这篇博客中，我将介绍如何使用纯 JavaScript 生成 UUID（通用唯一标识符）和随机 MD5 值的方法。这些方法适用于前端和后端开发，让我们一起深入浅出地了解吧。
2024-01-12 15:47:22
1155
原创 element input组件自动失去焦点问题解决
最近在 Vue3 + ElementPlus 中，使用 el-input 组件时，如果设置了 v-model，那么在每次改变内容后后，input 会自动失去焦点，这样会导致用户无法输入多个字符。
2024-01-10 16:04:15
2377
原创 nextjs + ahooks 报错 Cannot use import statement outside a module
在 nextjs 中使用 ahooks 时，报错 SyntaxError: Cannot use import statement outside a module
2024-01-10 15:31:50
846
原创 null和undefined的区别
null 和 undefined 是 JavaScript 中的两个基础类型特殊值。它们都表示“空”，但是有一些区别。
2024-01-09 15:44:06
528
原创 HTTP 3xx状态码：重定向的场景与区别
HTTP 状态码是服务器响应请求时传递给客户端的重要信息。3xx 系列的状态码主要与重定向有关，用于指示请求的资源已被移动到不同的位置，需要采取不同的操作来访问。
2024-01-09 15:41:56
800
原创 brew 安装使用 mysql、redis、mongodb
在 Mac 生态中 brew 真是个万能神器，今天就来介绍一下怎么使用 brew 安装 mysql、redis、mongodb，以及如何使用 brew 启动、关闭、重启这些服务。
2024-01-04 09:56:28
650
原创 linux centos使用rz、sz命令上传下载文件
一般情况下，我们会使用终端软件，如 XShell、SecureCRT 或 FinalShell 来连接远程服务器后，使用 rz 命令上传本地文件到远程服务器，再解压发版上线。
2024-01-04 09:53:56
2226
1
原创 fs-extra 文件操作的常用API
fs-extra 是一个比 node 内置 fs 模块更安全、更强大的文件操作库，支持 promise 和 async/await，为使用者免去了很多心理负担。
2024-01-03 14:48:33
592
原创 CentOS服务器之间免密登录和传输文件
使用过 Jenkins 的同学都知道，Jenkins 会在远程服务器上执行一些命令，如：cd /home/wwwroot/ && git pull，这时候就需要在 Jenkins 服务器上配置免密登录，以及在远程服务器上配置免密登录，这样才能实现 Jenkins 服务器和远程服务器之间的静默文件传输、执行脚本发版等操作。
2024-01-03 14:46:11
1020
原创 process.cwd() 与 __dirname 的区别
Node.js 中的 __dirname 和 process.cwd() 都是用于获取文件系统路径的全局变量和方法，但它们有不同的含义和用途。
2024-01-02 18:51:33
1839
原创 exec、execFile、fork、spawn的区别与使用场景
在Node.js中，通过子进程可以实现并行执行任务，处理复杂的操作，以及与外部命令或文件进行交互。Node.js提供了多种子进程创建方法，包括exec、execFile、fork和spawn。本文将对这些方法进行比较，并介绍它们的适用场景和示例。
2024-01-02 18:49:10
695
原创 path.join 与 path.resolve 的区别
在Node.js中，处理文件路径是一项常见的任务，而Node.js的path模块为我们提供了许多有用的函数来操作和处理文件路径。其中，path.join 和 path.resolve 是两个经常被使用的函数，它们在处理文件路径时有着不同的用途和特点。本文将重点探讨这两个函数的区别、使用场景以及它们之间的相同点和不同点。
2023-12-28 11:39:59
1188
原创 React onClick 事件阻止冒泡
在 React 中，你可以通过使用 onClick 事件来处理点击事件，并且可以通过在事件处理函数中调用 stopPropagation() 方法来阻止事件冒泡。本文将为你提供 类组件 和 函数式组件 两种示例。
2023-12-28 11:37:40
1029
原创 pm2的安装和常用命令
PM2 是 Node.js 应用程序的生产流程管理器，内置负载均衡。它可以帮助您保持 Node 应用程序永久活动，重起这些 node 应用程序也不需要停机，并简化常见的系统管理任务。
2023-12-27 11:06:42
624
原创 export * from 与 export {default} from用法总结
ES6 设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量，因此前端模块化日益趋向 ESModule 规范。
2023-12-27 11:04:43
755
原创 Antd Cascader 组件指定 placement 弹出位置无效
最近在使用 Antd Cascader 组件时，发现指定 placement 弹出位置无效，查看官方文档也没有找到相关的说明，经过一番搜索，终于发现了问题所在。
2023-12-26 13:30:21
604
原创 Shell脚本函数的定义和传参
linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。项目开发中利用Shell脚本可以很方便进行工程化，自动化操作。
2023-12-26 13:26:08
812
原创 Tailwind CSS 原子化开发初体验
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。再也不用为了取一个 classname 类名而烦恼了。
2023-12-25 15:00:07
1712
原创 n 管理 nodejs 版本不生效问题
最近搭建鸿蒙开发环境，需要安装 node v16.19.1 的版本，因为之前安装的是 node v20.x 的版本，所以需要降级，使用 n 工具切换版本后，发现 nodejs 版本还是之前的，切换没有生效。
2023-12-25 14:57:35
749
原创 nextjs + antd 与 UnoCSS 样式冲突
使用 nextjs + UnoCSS 框架开发项目时，引入 antd 组件库，发现样式冲突，导致 antd 的按钮组件变成透明的了，如下图。
2023-12-22 14:47:26
548
空空如也
webRTC怎么传输多个音视频流？
2022-11-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人