qq_42526440的博客

原创 使用npm运行js脚本覆盖vue依赖包

/ 源文件（你的组件）: 目标文件（node_modules中的组件）

原创 原生JavaScript实现输入验证的界面

原创 如何将master分支的代码合并到dev

将 master 分支的代码合并到 dev 分支，是 Git 协作开发中保持开发线同步的常见操作。

原创 使用git pull origin master报错，fatal: refusing to merge unrelated histories

Git 默认拒绝合并无关的历史记录以防止意外数据丢失。可能是本地初始化了新的仓库，或者历史记录被重写。你的本地仓库和远程仓库的初始提交不同。

原创 程序员内功之权衡思维

权衡思维是程序员底层逻辑中至关重要的一环，它标志着从“实现功能”的代码工人到“做出决策”的工程师的关键转变。每一次技术决策，本质上都是在多个（通常是相互冲突的）目标之间进行权衡取舍。

原创 程序员内功之成长性思维

赞美努力、策略和过程，而不仅仅是天赋和结果。例如，不要对孩子说“你真聪明！”，而是说“我看到了你非常努力！” 或 “你这个方法想得很妙！

原创 提交代码变更，跳过某些预定义的检查的git命令

m “new features”：添加提交信息，说明这是"新功能"跳过 pre-commit 钩子（通常用于代码风格检查、静态分析等）跳过 commit-msg 钩子（通常用于检查提交信息格式）git commit：提交暂存区的变更到版本库。

原创 JavaScript事件（event）对象方法与属性

表示事件是否由用户触发（true），还是由 JavaScript 代码触发（false）。表示事件当前所处的阶段（捕获阶段 1、目标阶段 2、冒泡阶段 3）。button（按下的鼠标按钮，0=左键，1=中键，2=右键）事件类型（如 “click”、“submit” 等）。阻止事件的默认行为（如阻止链接跳转、表单提交等）。返回事件的路径（即事件经过的 DOM 节点数组）。当前正在处理事件的元素（绑定事件监听器的元素）。阻止事件冒泡（阻止事件向父元素传播）。触发事件的元素（事件发生的源头元素）。

原创 Syntax Error: Error: PostCSS received undefined instead of CSS string

报错：npm i canvas 报错 canvas@2.11.2 run install node-pre-gyp install --fallback-to-build --update-binary。报错：Syntax Error: Error: PostCSS received undefined instead of CSS string。

原创 elementuiPlus+vue3手脚架后台管理系统，上生产环境之后，如何隐藏vite.config.ts的target地址

确保 .env.production 文件不被提交到代码仓库（已添加到 .gitignore）

原创 解决npm包安装或更新问题

清除npm缓存的命令是npm cache clean --force，该命令会强制删除所有本地缓存数据，通常用于解决包安装或更新问题。清除缓存后首次运行npm install可能较慢，因为需重新下载依赖。–force参数用于绕过npm的安全限制，确保缓存被彻底清除。此操作通常仅在故障排查时使用，日常开发中无需频繁执行。解决因缓存导致的包安装失败或版本冲突问题。释放磁盘空间（缓存可能占用数百MB）。若输出显示缓存大小为0，则操作成功。确保下载最新版本的包。‌清除npm缓存的方法‌。‌2.验证缓存状态‌。

原创 为什么console.log(‘handleEdit row is‘, row)这段代码，打印出来的是Proxy(Object)

实际上是响应式对象（Proxy），而不是普通的 JavaScript 对象。是 Vue 3 响应式机制的正常表现，不影响你对数据的访问和操作。，这是因为你在 Vue 3 中使用了。

原创 使用css做出折叠导航栏的功能

利用隐藏的复选框记录点击状态，通过CSS选择器 :checked 和相邻兄弟选择器控制导航菜单的显示/隐藏。

原创 Vue3类似百度风格搜索框组件

若父组件使用script setup的形式，自动暴露了顶层变量，则无需在父组件中使用components声明引用子组件。Vue3百度风格搜索框组件，使用vue3进行设计，亦有vue3+TS的版本。

原创 ＜script setup＞ 和在 ＜script＞ 中使用 setup() 函数有什么区别

在 Vue 3 的 Composition API 中，使用和在<script>中使用函数有本质区别。

原创 如何处理HTML5兼容性的问题

在使用 HTML5 时，兼容性问题需要综合考虑不同浏览器对新特性的支持程度。

原创 Vue首屏加载速度优化方案

使用 webpack-bundle-analyzer 或 rollup-plugin-visualizer 查看依赖分布，定位大文件。，即仅在需要时才从服务器加载。这种方法可以改善初始页面加载时间，因为应用程序会以更小的块加载，而不是在页面加载时加载所有组件。使用 terser-webpack-plugin 压缩 JS，cssnano 压缩 CSS。设置 Cache-Control: max-age=31536000（一年）用于静态资源。实现图片懒加载：使用 vue-lazyload 或。

原创 如何使用vue2设计提示框组件

下面是一个使用Vue2实现的Tooltip组件示例，支持自定义内容、不同方向定位和动画效果。子组件注意事项动态内容需要使用v-html时要确保内容安全。固定定位可能需要处理滚动容器的情况。复杂场景建议使用teleport（需要Vue3）。高频触发时建议添加防抖逻辑。移动端需要额外处理touch事件。运行如下

原创 typescript中的泛型

泛型允许我们在定义函数、类或接⼝时，使⽤类型参数来表示，这些参数在时，才被，泛型能让同⼀段代码适⽤于多种类型，同时仍然保持类型的安全性。如下代码中<T>

原创 如何在docker desktop上安装mysql

打开终端（Windows: PowerShell/CMD；

原创 typescript中interface接口(如何使用)

不能包含任何实现！

原创 typescript中的抽象类

1.定义通用接口：为⼀组相关的类定义通⽤的⾏为（⽅法或属性）时。2.提供基础实现：在抽象类中提供某些⽅法或为其提供基础实现，这样派⽣类就可以继承这些实现。3.确保关键实现：强制派⽣类实现⼀些关键⾏为。4.共享代码与逻辑：当多个类需要共享部分代码时，抽象类可以避免代码重复。

原创 typescript中的类型断言

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。TypeScript会假设你，程序员，已经进行了必须的检查。有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。至于使用哪个大多数情况下是凭个人喜好；类型断言有两种形式。

原创 typescript中的type如何使用

在TypeScript中，。类型别名可以为任何类型提供一个新名字，这有助于使代码更加清晰和可维护。

原创 es6中的展开运算符

对象的展开比数组的展开要复杂的多。像数组展开一样，它是从左至右进行处理，但结果仍为对象。这就意味着出现在展开对象后面的属性会覆盖前面的属性。这会令bothPlus的值为[0, 1, 2, 3, 4, 5]。展开操作创建了 first和second的一份浅拷贝。对象展开还有其它一些意想不到的限制。首先，它仅包含对象 自身的可枚举属性。其次，TypeScript编译器不允许展开泛型函数上的类型参数。它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。，在这里这并不是我们想要的结果。

原创 typescript中的symbol类型

布尔值，表示当在一个对象上调用Array.prototype.concat时，这个对象的数组元素是否可展开。方法，被内置方法Object.prototype.toString调用。方法，被String.prototype.search调用。方法，被String.prototype.replace调用。方法，被String.prototype.match调用。方法，被String.prototype.split调用。像字符串一样，symbols也可以被用做对象属性的键。方法，被for-of语句调用。

原创 pc端小卡片功能-原生JavaScript金融信息与节日日历

【代码】pc端小卡片功能-原生JavaScript金融信息与节日日历。

原创 vue2轮播图组件

【代码】vue2轮播图组件。

原创 sass三大循环语法

for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for。@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。var 可以是任何变量，比如 $i；和 必须是整数值。

原创 在vscode的终端上运行vue -V，会出现 : 无法加载文件 C:\Users\31772\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。

因为在此系统上禁止运行脚本”的问题，通常是由于Windows PowerShell的执行策略设置导致的。Windows PowerShell有一个安全功能，默认情况下，禁止运行脚本，以防止执行恶意脚本。在更改了执行策略之后，关闭PowerShell，然后在VSCode的终端中重新尝试运行vue -V。如果您需要，也可以将其设置为Unrestricted，但请注意，这会降低系统的安全性。右键点击“Windows PowerShell”并选择“以管理员身份运行”。在开始菜单中搜索“PowerShell”。

原创 vue watch用法 使用说明

对象是个引用类型，虽然打印的是，两个数据，但是他们在内存中指向的是同一个地址，一个改变另一个也会改变。

原创 如何更新-node版本

下载你想安装的node版本的msi程序所有版本的msi地址：https://nodejs.org/dist。

原创 Promise详解

promise本身是同步的，then，catch是异步的Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，是为了解决异步处理回调地狱而产生的Promise构造函数是同步执行的then 方法是异步执行的，所以Promise创建后里面的函数会立即执行，构造函数中的resolve和reject只有第一次执行有效，也就是说Promise状态一旦改变就不能再变async函数返回一个Promise对象，可以使用then方法添加回调函数，

原创 ES6 解构赋值 const {} =this

上面的这句话是一个简写，最终的含义相当于....

原创 TCP与UDP的区别

udp还有重要的应用场景：即隧道网络（即常用的VPN，以及在SDN中用到的VXLAN也是一种），但是对少量丢包，并没有太大要求的场景，比如域名查询，电话通信，视频直播等。UDP- 写信-（对方是否收到，内容是否完整，顺序是否正确）第一种为书信方式，第二种方式为打电话（不考虑速度因素）TCP- 电话-（电话接通，相互通话，结束通话）给对方，比如传输文件，发送邮件，浏览网页等），但是可能产生丢包，所以适用于。三次握手，运输确认，四次挥手。（适用于要求较高的场景，需要。

原创 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

原创 JS-解构赋值如何使用

解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”为到一系列变量中，因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。 let arr = [ "john", "lily" ] let [ first, second ] = arr console.log(first, second) // john lilylet [ firstName, secondName ] = "Neal Caffiry".split(" ") console.log(f

原创 完成三级联动的路由跳转与传递参数业务

三级联动如下图所示：给a标签添加自定义属性data-categoryName，保证这个节点带data-categoryName，一定是a标签可以通过节点的dataset属性获取相应节点的自定义属性，返回的是一个对象KV【自定义属性相关的】如果带有categoryname字段的一定是a标签解构赋值:let { categoryname, category1id, category2id, category3id } = nodeElement.dataset;两个对象如下

原创 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

原创 JS算法-整数转罗马数字

回顾前言中列出的这 13 个符号，可以发现：千位数字只能由M 表示；百位数字只能由C，CD，D 和CM 表示；十位数字只能由X，XL，L 和XC 表示；个位数字只能由I，IV，V 和IX 表示。这恰好把这13 个符号分为四组，且组与组之间没有公共的符号。因此，整数num 的十进制表示中的每一个数字都是可以单独处理的。进一步地，我们可以计算出每个数字在每个位上的表示形式，整理成一张硬编码表。如下图所示，其中 0 对应的是空字符串。利用模运算和除法运算，我们可以得到num 每个位上的数字：t.