- 博客(297)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Syntax Error: Error: PostCSS received undefined instead of CSS string
报错：npm i canvas 报错 [email protected] run install node-pre-gyp install --fallback-to-build --update-binary。报错：Syntax Error: Error: PostCSS received undefined instead of CSS string。
2025-07-16 11:43:40
139
原创 elementuiPlus+vue3手脚架后台管理系统，上生产环境之后，如何隐藏vite.config.ts的target地址
确保 .env.production 文件不被提交到代码仓库（已添加到 .gitignore）
2025-07-12 20:32:58
506
原创 解决npm包安装或更新问题
清除npm缓存的命令是npm cache clean --force，该命令会强制删除所有本地缓存数据，通常用于解决包安装或更新问题。清除缓存后首次运行npm install可能较慢，因为需重新下载依赖。–force参数用于绕过npm的安全限制，确保缓存被彻底清除。此操作通常仅在故障排查时使用，日常开发中无需频繁执行。解决因缓存导致的包安装失败或版本冲突问题。释放磁盘空间（缓存可能占用数百MB）。若输出显示缓存大小为0，则操作成功。确保下载最新版本的包。清除npm缓存的方法。2.验证缓存状态。
2025-07-11 10:21:57
180
原创 为什么console.log(‘handleEdit row is‘, row)这段代码，打印出来的是Proxy(Object)
实际上是响应式对象（Proxy），而不是普通的 JavaScript 对象。是 Vue 3 响应式机制的正常表现，不影响你对数据的访问和操作。，这是因为你在 Vue 3 中使用了。
2025-07-09 21:19:48
200
原创 Vue3类似百度风格搜索框组件
若父组件使用script setup的形式，自动暴露了顶层变量，则无需在父组件中使用components声明引用子组件。Vue3百度风格搜索框组件，使用vue3进行设计，亦有vue3+TS的版本。
2025-06-19 18:20:08
265
原创 ＜script setup＞ 和在 ＜script＞ 中使用 setup() 函数有什么区别
在 Vue 3 的 Composition API 中，使用和在<script>中使用函数有本质区别。
2025-06-16 21:04:32
327
原创 Vue首屏加载速度优化方案
使用 webpack-bundle-analyzer 或 rollup-plugin-visualizer 查看依赖分布，定位大文件。，即仅在需要时才从服务器加载。这种方法可以改善初始页面加载时间，因为应用程序会以更小的块加载，而不是在页面加载时加载所有组件。使用 terser-webpack-plugin 压缩 JS，cssnano 压缩 CSS。设置 Cache-Control: max-age=31536000（一年）用于静态资源。实现图片懒加载：使用 vue-lazyload 或。
2025-06-12 16:06:26
827
原创 如何使用vue2设计提示框组件
下面是一个使用Vue2实现的Tooltip组件示例，支持自定义内容、不同方向定位和动画效果。子组件注意事项动态内容需要使用v-html时要确保内容安全。固定定位可能需要处理滚动容器的情况。复杂场景建议使用teleport（需要Vue3）。高频触发时建议添加防抖逻辑。移动端需要额外处理touch事件。运行如下
2025-06-11 20:36:36
404
原创 typescript中的泛型
泛型允许我们在定义函数、类或接⼝时，使⽤类型参数来表示，这些参数在时，才被，泛型能让同⼀段代码适⽤于多种类型，同时仍然保持类型的安全性。如下代码中<T>
2025-06-11 19:19:56
238
原创 typescript中的抽象类
1.定义通用接口：为⼀组相关的类定义通⽤的⾏为（⽅法或属性）时。2.提供基础实现：在抽象类中提供某些⽅法或为其提供基础实现，这样派⽣类就可以继承这些实现。3.确保关键实现：强制派⽣类实现⼀些关键⾏为。4.共享代码与逻辑：当多个类需要共享部分代码时，抽象类可以避免代码重复。
2025-06-06 11:56:24
179
原创 typescript中的类型断言
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。TypeScript会假设你，程序员，已经进行了必须的检查。有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。至于使用哪个大多数情况下是凭个人喜好；类型断言有两种形式。
2025-06-05 21:51:13
179
原创 es6中的展开运算符
对象的展开比数组的展开要复杂的多。像数组展开一样，它是从左至右进行处理，但结果仍为对象。这就意味着出现在展开对象后面的属性会覆盖前面的属性。这会令bothPlus的值为[0, 1, 2, 3, 4, 5]。展开操作创建了 first和second的一份浅拷贝。对象展开还有其它一些意想不到的限制。首先，它仅包含对象 自身的可枚举属性。其次，TypeScript编译器不允许展开泛型函数上的类型参数。它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。，在这里这并不是我们想要的结果。
2025-06-03 17:45:34
200
原创 typescript中的symbol类型
布尔值，表示当在一个对象上调用Array.prototype.concat时，这个对象的数组元素是否可展开。方法，被内置方法Object.prototype.toString调用。方法，被String.prototype.search调用。方法，被String.prototype.replace调用。方法，被String.prototype.match调用。方法，被String.prototype.split调用。像字符串一样，symbols也可以被用做对象属性的键。方法，被for-of语句调用。
2025-06-02 18:54:55
321
原创 sass三大循环语法
for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for。@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。var 可以是任何变量，比如 $i；和 必须是整数值。
2025-05-26 21:05:57
787
原创 在vscode的终端上运行vue -V，会出现 : 无法加载文件 C:\Users\31772\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。
因为在此系统上禁止运行脚本”的问题，通常是由于Windows PowerShell的执行策略设置导致的。Windows PowerShell有一个安全功能，默认情况下，禁止运行脚本，以防止执行恶意脚本。在更改了执行策略之后，关闭PowerShell，然后在VSCode的终端中重新尝试运行vue -V。如果您需要，也可以将其设置为Unrestricted，但请注意，这会降低系统的安全性。右键点击“Windows PowerShell”并选择“以管理员身份运行”。在开始菜单中搜索“PowerShell”。
2024-06-14 10:47:20
794
1
原创 如何更新-node版本
下载你想安装的node版本的msi程序所有版本的msi地址：https://nodejs.org/dist。
2023-02-23 00:15:10
287
原创 Promise详解
promise本身是同步的，then，catch是异步的Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，是为了解决异步处理回调地狱而产生的Promise构造函数是同步执行的then 方法是异步执行的，所以Promise创建后里面的函数会立即执行，构造函数中的resolve和reject只有第一次执行有效，也就是说Promise状态一旦改变就不能再变async函数返回一个Promise对象，可以使用then方法添加回调函数，
2023-01-15 23:27:57
997
原创 TCP与UDP的区别
udp还有重要的应用场景：即隧道网络（即常用的VPN，以及在SDN中用到的VXLAN也是一种），但是对少量丢包，并没有太大要求的场景，比如域名查询，电话通信，视频直播等。UDP- 写信-（对方是否收到，内容是否完整，顺序是否正确）第一种为书信方式，第二种方式为打电话（不考虑速度因素）TCP- 电话-（电话接通，相互通话，结束通话）给对方，比如传输文件，发送邮件，浏览网页等），但是可能产生丢包，所以适用于。三次握手，运输确认，四次挥手。（适用于要求较高的场景，需要。
2022-09-15 21:01:28
619
原创 JS中Object.assign()方法
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。democonst target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);console.log(target);// expected output: Object { a: 1, b: 4, c: 5 }consol
2022-05-01 21:55:13
287
原创 JS-解构赋值如何使用
解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”为到一系列变量中，因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。 let arr = [ "john", "lily" ] let [ first, second ] = arr console.log(first, second) // john lilylet [ firstName, secondName ] = "Neal Caffiry".split(" ") console.log(f
2022-05-01 21:44:52
477
原创 完成三级联动的路由跳转与传递参数业务
三级联动如下图所示：给a标签添加自定义属性data-categoryName，保证这个节点带data-categoryName，一定是a标签可以通过节点的dataset属性获取相应节点的自定义属性，返回的是一个对象KV【自定义属性相关的】如果带有categoryname字段的一定是a标签解构赋值:let { categoryname, category1id, category2id, category3id } = nodeElement.dataset;两个对象如下
2022-05-01 21:07:10
275
原创 CSS实现炫彩文字和滚动变色动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multi-colo
2022-05-01 19:20:23
956
原创 JS算法-整数转罗马数字
回顾前言中列出的这 13 个符号，可以发现：千位数字只能由M 表示；百位数字只能由C，CD，D 和CM 表示；十位数字只能由X，XL，L 和XC 表示；个位数字只能由I，IV，V 和IX 表示。这恰好把这13 个符号分为四组，且组与组之间没有公共的符号。因此，整数num 的十进制表示中的每一个数字都是可以单独处理的。进一步地，我们可以计算出每个数字在每个位上的表示形式，整理成一张硬编码表。如下图所示，其中 0 对应的是空字符串。利用模运算和除法运算，我们可以得到num 每个位上的数字：t.
2022-04-30 23:05:21
739
原创 JS中Array.prototype.some()方法
some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。democonst array = [1, 2, 3, 4, 5];// checks whether an element is evenconst even = function (element,index) { return element % 2 === 0 & &index === 3}console.log(array.some(even));//
2022-04-28 20:54:57
936
原创 CSS之一直在爬坡的盒子
HTML：<div id="loader"> <div id="box"></div> <div id="hill"></div></div>CSS：html,body { background-color: #404456;}#loader { position: absolute; top: 50%; left: 50%; margin-top: -2.7em; margin-lef
2022-04-27 16:23:04
327
原创 通过random加floor方法返回0-n(不包括n)的整数
Math.random()Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。function getRandomInt(max) { return Math.floor(Math.random() * max);}通过Math的获取随机数*arr的长度然后向下取整，得到一个0-n的整数随机数获取的是0-1不包括1，将其与n
2022-04-25 22:10:38
314
原创 正则表达式中test()方法
test() 方法是正则表达式的一个方法，用于检测一个字符串是否匹配某个模式.test 方法检查字符串是否与给出的正则表达式模式相匹配，如果是则返回 true，否则就返回 false。每个正则表达式都有一个 lastIndex 属性，用于记录上一次匹配结束的位置.语法：regexp.test(str) 在全局匹配模式下对于同一个正则对象重复调用就会出现下一次的匹配位置从上一次匹配结束的位置开始,解决方法重置lastIndex为0let reg = /^[\d]{2}$/g; let str
2022-04-25 21:40:07
9052
原创 常见的JavaScript 字符串方法汇总
01、str.length这个简单的命令返回字符串的长度，这在前端很常见，用于对文本字段输入进行数据验证、限制某些数据对象的长度等等。let str = "matt";console.log(str.length); // this outputs 402、charAr(index)此函数将字符串视为字符数组。它检索你提供的索引处的字符。下面是一个例子：let str = ‘The cool programmer’; console.log(str.charAt(0)); // this ou
2022-04-24 18:29:26
1345
原创 如何隐藏电脑的第三方输入法-windows高级键盘设置
若是点击了该红框内的选项便会多出如下：可以看到，此时输入法在左边显示，而非默认的右边。亦可在第三方输入法的此处设置更快捷的方法便是直接在windows的键盘更改默认输入法。
2022-04-24 18:23:55
539
原创 常用sql语句整合(持续更新)
最常用的显示命令：1、显示数据库列表。show databases;2、显示库中的数据表：use mysql;show tables;3、显示数据表的结构：describe 表名;4、建库：create database 库名;5、建表：use 库名；create table 表名 (字段设定列表);6、删库和删表:drop database 库名;drop table 表名;7、将表中记录清空：delete from 表名;(这个清空表只是把数据表内容数据清掉
2022-04-24 16:14:56
204
原创 Array.prototype.flat()方法
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。const arr1 = [0, 1, 2, [3, 4]];console.log(arr1.flat());// expected output: [0, 1, 2, 3, 4]const arr2 = [0, 1, 2, [[[3, 4]]]];console.log(arr2.flat(2));// expected output: [0, 1, 2, [3, 4]]
2022-04-23 16:36:31
262
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人