- 博客(72)
- 收藏
- 关注
RSS订阅原创 前端如何发布npm包
初始化项目并安装 Webpack。配置 Webpack 打包规则。编写并导出你的代码。打包代码并配置。登录 npm 并发布你的包。通过以上步骤，你就可以将自己封装的 JavaScript 代码打包并发布到 npm 上，供他人使用！如果本文浏览量高，评论较多。后期将考虑出一期怎样让自己的npm包支持TypeScript，在npm官网的包名上拥有TS。
2025-03-11 21:54:31
1045
原创 一文带你搞懂前端大文件上传
本文介绍大文件上传的概念，带你搞懂什么是大文件上传以及大文件上传解决了什么痛点。另外还将介绍大文件上传的一些功能点以及难点。最后推出一款非常好用的大文件上传库，可以做到开箱即用，无论是vue2/vu3、react还是jquery原生js开发。并且内置了诸如错误重传策略，断点续传、重传、重试和暂停等功能，即使你从未做过大文件上传，你也可以使用的随心应手。
2025-02-24 17:26:02
1211
4
原创 一文带你搞懂微前端框架wujie运行模式
文本主要介绍了wujie运行模式的概念，以及各种不同的运行模式之间的优劣对比，和怎样根据你的业务场景选择合适的运行模式
2025-02-24 15:55:04
476
原创 vue3和vue2代码兼容使用方案
为了让 Vue 3 子应用解析 Vue 2 的组件，推荐使用插件或将 Vue 2 组件封装为 Web Components。如果需要更灵活的解决方案，可以考虑利用主应用渲染 Vue 2 的组件，子应用通过回调与之交互。
2025-01-03 21:46:41
1758
原创 element ui Switch组件二次修改
想实现下方一样的样式，把文字放到开关里面，可惜element ui并不支持这个功能，只有element plus 才支持，但是一个项目不可能即用element ui 又用plus，所以我便对Switch组件的css样式进行了修改。在element ui 中，开关的文字不能够放到开关里面，只能放到外面，这样不仅看起来很难看，也非常占用地方。有部分代码需要你手动调整，我的样式不一定符合你的项目，可能需要调整的样式在代码里面都有注释，自己认真看看。修改了的代码（这里主要看的是。最后这样就可以达到效果了。
2024-12-31 14:03:19
398
原创 通过网页DOM定位到VSCod插件
按住快捷键，鼠标移动你想要定位的对应DOM元素，会发现鼠标样式会改变，按住快捷键不松手，点击鼠标左键，就能定位到VSCode对应文件的代码行了！文件，引入插件和插件配置操作，这里有两种写法，选择一种符合你项目的即可。启动项目后，会发现控制台里面，会有提示。Windows用户，对应的是。写法（一般都是用这种）
2024-12-30 16:23:35
235
原创 Vue2/3 生命周期详细对比与使用指南
Vue 2 中，生命周期是指组件实例在创建、挂载、更新、销毁时所经历的一系列过程。Vue 3 的生命周期钩子在选项式 API 中与 Vue 2 类似，但组合式 API 提供了全新的方式来组织生命周期逻辑。组合式 API 提供了函数式的生命周期钩子，更灵活地组织逻辑。Vue 3 选项式 API 名称。Vue 3 组合式 API 名称。直接在setup中调用即可。直接在setup中调用即可。
2024-12-20 11:48:05
733
原创 Vue2/3 事件修饰符大全
stop.prevent.capture.self.once.native.passive.keyCode（已弃用）.key.left.right.middle.ctrl.alt.shift.meta.exact请注意 下列修饰符在 vue3 中已经弃用.native.keyCode。
2024-12-13 14:05:52
488
原创 @tanstack/vue-query使用手册
下面展示 参数如何使用['data'],},staleTime: 60000, // 缓存 60 秒cacheTime: 300000, // 缓存保留时间 5 分钟retry: 2, // 重试 2 次refetchInterval: 2 * 1000, // 2s轮询一次接口enabled:true, // 只有为true才可以发送请求refetchOnWindowFocus: true, // 窗口获得焦点时重新获取数据。
2024-11-25 13:06:02
2682
原创 vue2路由传参详解
在 Vue 项目中，参数传递方式的选择直接影响到用户体验和技术实现。我们需要根据具体场景选择params或query如果参数仅用于组件内部逻辑且不需要在 URL 中显示，建议使用params。如果参数需要在刷新页面后保留，或者允许用户通过 URL 分享当前状态，建议使用query。通过合理规划路由和参数传递方式，可以更好地满足项目的需求，同时提升用户体验和代码维护性。
2024-11-25 10:46:28
1316
原创 vue图片导入的几种方式及优劣对比
方式适用场景优点缺点相对路径小型项目、简单图片引用简单直接不灵活，维护成本高require动态组件内使用动态加载Webpack 特定语法importES 模块化、静态路径标准语法仅支持静态路径public文件夹引用公共资源（如 favicon 或无需打包资源）路径直观，不依赖工具处理无法享受构建优化在线图片链接第三方资源或公共资源不占用本地存储，灵活网络依赖，链接失效风险CSS 背景图片装饰性图片灵活控制样式无法动态加载或 SEO 优化base64内联图片。
2024-11-22 10:59:19
696
原创 nvm的基本使用
nvm安装检查环境如果你已经安装nodejs, 请先卸载nodejs; 从控制面板中 卸载程序中卸载nodejs 使用管理员身份在cmd中使用 where node 查看是否删除干净nodejs下载nvm参考链接：nvm的下载，安装与使用方法图文详解_node.js_脚本之家（感谢脚本之家的同学提供的下载方法）
2024-11-07 09:34:43
212
原创 css实现antd丝带效果
赠送一个下边框阴影 box-shadow: 0px 16px 8px -8px rgba(5, 5, 5, 0.06);
2024-11-01 01:05:47
510
原创 二次封装useEffect hook,实现页面加载时不触发
使用封装好的hook。使用也很简单，和useEffect用法一模一样，只是多了一个可选参数，传入true就代表页面加载时触发这个函数(也就是和useEffect一模一样了)。这个参数可以不传，不传则默认为false，即实现页面加载时不触发。首先对useEffect进行二次封装。
2024-08-26 19:25:37
250
原创 react如何使用useContext + TS 自定义hooks
通过在 Context 和相关函数中添加类型定义，我们可以在 TypeScript 中获得更好的类型检查和智能提示。这些类型定义有助于捕获潜在的错误，并使代码更易于维护和理解。
2024-08-05 21:20:04
408
原创 服务器生成秘钥并使用
服务器怎样生成秘钥，xshell怎样使用秘钥连接服务器？下面以centos做演示（不仅仅只是cnetos适用，ubt也是可以用的的，但是命令需要稍微改一下）
2024-07-27 11:32:06
698
原创 允许服务器支持密码直接连接
服务器只允许秘钥而不允许输入密码连接，怎么修改运行使用密码连接？下面以centos做演示（不仅仅只是cnetos适用，ubt也是可以用的的，但是命令需要稍微改一下）
2024-07-27 11:02:57
362
原创 docker发布镜像到自己远程私有仓库
请自己查找别的资料，此篇文章只讲述镜像推送到远程。，现在你要将它推送到 Docker Hub 的。假设你已经构建了一个镜像。
2024-07-26 23:34:30
263
原创 前端部署后提示用户刷新页面
实现这个需求有很多方式，我这里推荐一个本人认为最佳的一个方案，无需循环调用接口，纯前端就可以实现，也非常欢迎大家评论这个方案的优劣。
2024-07-21 23:23:35
770
原创 前端TS习题
本次一共推出三篇文章，TS基础篇、TS高阶篇、TS习题篇，三篇文章均已发布。请定义一个变量 ，类型为 解释我们使用 关键字定义变量，并指定其类型为 定义一个接口 ，包含 （字符串类型） 和 （数字类型）两个属性。然后定义一个变量 ，并使用该接口。解释定义了接口 ，包含 和 两个属性。然后定义了一个变量 ，并使用 接口来确保其具有 和 属性。定义一个类 ，具有属性 （字符串类型） 和方法 （返回 ）。实例化一个对象 ，并调用其 方法。解释定义了一个类 ，包含一个构造
2024-07-20 08:57:08
786
原创 前端TS高阶篇
类型断言是 TypeScript 中一个强大且灵活的工具，允许开发者在需要时绕过类型检查。合理使用类型断言可以增强代码的灵活性和可操作性，但也需要注意合理性和安全性。理解并掌握类型断言的使用场景，可以让你在编写 TypeScript 代码时更加得心应手。三斜杠指令在 TypeScript 中主要用于文件之间声明依赖关系和引入类型声明。：声明文件间的依赖关系，指定某个文件路径。：引入类型声明文件，通常用于引入目录下的类型库。：禁用默认库文件的加载，适合完全控制标准库的情况。
2024-07-20 08:55:26
962
原创 前端TS语法基础篇
/ 根据初始赋值来推导出变量的类型，以后的str的类型就不能改了// str = 2；// 报错，原因：变量在定义的时候，类型已经确定下来了，不能修改// 类型为1，常量不能被修改，所以它的值就是它的类型// 类型为2// 类型为123// ts中，let和const的区别：let的类型由它定义的值的类型来确定，而const的类型就是它值的类型// interface 相当于自定义类型// 定义接口类型 ==> 给对象用的// 属性名: 值的类型// 必须是分号;obj = {
2024-07-20 08:53:16
691
原创 发布支持TS的npm包
美中不足的就是，这个包之前使用js写的，现在你想增加TS类型，提升用户使用体验，那么你现在可以做以下几个步骤。2.这里 xxx.d.ts 的文件定义很重要，一定义保持一致，如果你的包是分别暴露，那这里就用分别暴露，默认暴露就要用默认暴露。1.你只需要严格按照我上面的那几个步骤去做就OK，不需在你的npm去下载 ts 相关的包，你仅仅只需要新建一个 xxx.d.ts 文件即可，然后在你的。2.在package.json中添加类型定义文件的路径: 在你的。在这个文件中，你需要声明所有导出的类型和函数。
2024-07-18 23:15:01
783
原创 style-components使用手册
div><MyButton $primary $color="black">按钮</MyButton></div>
2024-07-17 20:16:35
1711
原创 css实现前端水印
插入：小编自己封装了一个大文件上传的工具函数，支持切片上传、错误重试、上传进度、暂停和继续等，目前已发布在npm官网，感兴趣的可以看看。多处水印的实现，实际上传就是创建了一张svg格式的图片，再将这张图片作为背景图来实现。水印的具体细节可以调节svg的相关属性来实现。下载命令：npm i enlarge-file-upload。
2024-07-16 20:21:02
945
原创 图片依赖父容器等比适配不变形
在开发的时候，常常会遇到要基于父容器进行图片展示，父容器的宽高是固定的，需要将图片放进去，还需要保证图片等比缩放，不变形。下面有一些自带的css属性可以很好的解决这个问题。插入：小编自己封装了一个大文件上传的工具函数，支持切片上传、错误重试、上传进度、暂停和继续等，目前已发布在npm官网，感兴趣的可以看看。下载命令：npm i enlarge-file-upload。
2024-07-16 20:17:53
323
原创 react-redux搭建及不同版本间的对比
它旨在提供更简便的 API，帮助开发者解决 Redux 应用中经常遇到的一些常见问题，如配置 store、添加中间件、编写 reducer 逻辑等。Redux Toolkit 引入了几个核心概念，如“切片（slices）”来简化 reducer 和 action creators 的编写，以及创建异步逻辑的“createAsyncThunk”等工具。这种方法在react-redux版本5及之前非常流行，随着react-redux版本6和7的发布，这种方法已经被淘汰了。
2024-06-15 21:44:22
591
原创 在 Node.js 中使用 MySQL 并实现事务以解决并发竞态条件问题
【代码】在 Node.js 中使用 MySQL 并实现事务以解决并发竞态条件问题。
2024-06-14 23:34:34
561
原创 react 使用 react-intl包 配置国际化
注意:这里无论是FormattedMessage中的id还是formatMessage中的id，都与html中的id无任何联系，不会引起冲突，这里的id仅用于做国际化的标识， 编译后id将不会存在，无需有任何担心。注意:本篇文章中，只针对了中英文两种语言的切换，但实际上是可以对于多种语言的切换，并不局限于某几种语言，多种语言需要定义多个json文件，这个在你熟读完整篇文章后可以去尝试多语言的切换。注意:这一情况是针对于国际化业务的，提供解决问题思路，与任何npm无关，可以被任何国际化场景借鉴或使用。
2024-05-19 11:55:34
1742
原创 js光标定位+回显
这里借助了sessionStorage来存储数据和取出数据，所以在代码上有些改动，如果需要使用，请按照自己的业务场景修改。监听光标变化，并获取变化后的位置。
2024-04-14 10:14:01
388
原创 前端获取设备唯一标识
在一些场景中，如游客模式下，用户无需登录或注册任何信息，便可以使用我们所创建的应用，但是我们希望加上限制，每台设备仅仅能在游客模式下对服务发送3条信息，那么我们就需要获取设备的唯一标识，存在数据库中，来判断用户在某台设备所发送的信息数量。在打印出来的event.candidate变量中，
2024-02-18 23:00:24
1405
1
原创 npm淘宝镜像失效
在下载npm包时出现这个报错，这是因为淘宝npm的证书失效，使用下方命令重新配置即可。输入改命令后，即可重新使用npm。
2024-01-26 22:00:49
1149
1
原创 vue+react 项目全局loading 封装
element plus中的loading有自己的样式，一般不需要自定义样式，具体可以参考element plus官网。这里讲的是封装loading，封装完后可以直接使用，一般配合封装的ajax或axios等请求使用。这里需要配合样式一起使用，样式可以直接写到全局样式中（具体按照你的实际项目中来）
2024-01-20 19:08:29
126
原创 element plus form事件
该方法的 ruleFormRef 为表单的 ref，我们通过ref，可以用别的按钮来触发表单校验，无需通过表单自带的确定按钮校验。
2023-12-30 21:42:08
163
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人