在工作或学习的过程中，我们会遇到各种各样的问题。这些问题之所以成为问题，是因为它们触及了我们知识的盲区。面对未知，我们需要投入更多时间和精力去学习，逐步填补这些空白，从而点亮我们的知识地图。正是基于这个原因，就有了这个《问题清单》。🔸🔹

1. HTML

1.1. <img>动态修改图片颜色 🔹

在实现el-menu动态配置菜单图标的时候，因为从字体图标替换成在线获取的.svg图片，所以需要研究下如何实现动态配置颜色，好解决后续各项目不通过主题的需求。

transform: translateX(-80px);
filter: drop-shadow(#a80f0f 80px 0);

TypeScript

as keyof typeof

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'.

viewValue.forEach((item: string) => {
        userInfoList.value.push({
          label: t[locale.value][item],
          value: userInfoObject[item as keyof typeof userInfoObject]
        })
})

2. JavaScript

2.1. Array.prototype.every()

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

every（）方法用来判断所有元素是否都通过制定函数的测试，

2.2. Math.floor() 、Math.ceil() 和 Math.round() 🔹

1. Math.floor()，向下取整，Math.floor(5.96) = 5。
2. Math.ceil()，向上取整，Math.ceil(5.96) = 6。
3. Math.round()，四舍五入，取其值的绝对值进行四舍五入，如果原数是负数，结果保持为负。比如Math.round(5.96) = 6；Math.round(-5.0001) = -5。

2.3. 简述js中 for in 与 for of 区别

2.4. js 遍历嵌套数组

2.5. Array.prototype.reduce() 🔹

reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

比如使用reduce方法找到子数组长度最长的子数组的写法为：

let longestSubArray = arrs.reduce((prev, current) => {
    return prev.length > current.length ? prev : current;
});

以下是对JavaScript中数组（Array）原型方法 filter(), from(), 和 map() 的简要解释：

2.5.1. Array.prototype.filter()

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。这个方法对数组的每个元素执行一次给定的函数，并利用返回值（真值）来确定是否保留该元素。 语法:

const newArray = array.filter(callback(element[, index[, array]])[, thisArg])

参数:

• callback: 用来测试每个元素的函数，它可以接收三个参数：
  • element: 当前正在处理的元素。
  • index（可选）: 当前元素的索引。
  • array（可选）: 调用 filter 的数组。
• thisArg（可选）: 执行 callback 时使用的 this 值。 返回值: 一个新的、由通过测试的元素组成的数组。 示例:

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(element => element > 3);
console.log(filteredArray); // [4, 5]

2.5.2. Array.prototype.from()

from() 方法从类数组对象或可迭代对象创建一个新的、浅拷贝的数组实例。 语法:

Array.from(arrayLike[, mapFn[, thisArg]])

参数:

• arrayLike: 一个类数组对象或可迭代对象，用来从中复制元素。
• mapFn（可选）: 如果指定了该参数，新数组中的每个元素都会执行该回调函数。
• thisArg（可选）: 执行 mapFn 时使用的 this 值。 返回值: 一个新的数组实例。 示例:

const arrayLike = { length: 3, 0: 'a', 1: 'b', 2: 'c' };
const arrayFrom = Array.from(arrayLike);
console.log(arrayFrom); // ['a', 'b', 'c']

2.5.3. Array.prototype.map()

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 语法:

const newArray = array.map(callback(element[, index[, array]])[, thisArg])

参数:

• callback: 为数组中的每个元素执行的函数，它接收三个参数：
  • element: 当前正在处理的元素。
  • index（可选）: 当前元素的索引。
  • array（可选）: 调用 map 的数组。
• thisArg（可选）: 执行 callback 时使用的 this 值。 返回值: 一个新数组，每个元素都是回调函数的结果。 示例:

const array = [1, 2, 3];
const mappedArray = array.map(element => element * 2);
console.log(mappedArray); // [2, 4, 6]

这些方法都是JavaScript数组处理中非常有用的工具，它们允许开发者以声明式的方式操作数组，提高代码的可读性和简洁性。

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

2.6. Array.prototype.fill() 🔸

fill() 方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为 array.length）内的全部元素。它返回修改后的数组。比如，创建一个数组长度为8，默认值为false的数组：

let visited = new Array(5).fill(false);
// [false, false, false, false, false]

2.7. type 和 interface 声明的区别

type 和 interface 声明的区别，尽量使用 type 声明，如果使用 interface 但又不进行导出的话，会在 vue-tsc 生成类型声明时报错。

2.8. JSON.stringify() 实现原理

JSON.stringify() 实现原理，多层嵌套数据，转义等等问题理清楚

2.9. js 二维数组

2.10. 暴力解法

2.11. Math.min()

2.12. 双指针

2.13. 时间复杂度

时间复杂度是用来衡量算法执行时间随输入规模增长而增长的程度的一个概念。它描述了算法的运行时间与输入规模之间的关系。通常用大O符号（O）来表示。

时间复杂度是对算法运行时间的一个上界估计，表示在最坏情况下，算法的运行时间随输入规模增长的趋势。它帮助我们理解算法在不同规模的输入下的性能表现，并且在选择算法时提供了一个指导。

常见的时间复杂度包括O(1)（常数时间）、O(log n)（对数时间）、O(n)（线性时间）、O(n log n)（线性对数时间）、O(n^2)（平方时间）等。时间复杂度越低，算法的性能越好。

2.14. String

2.15. 工厂模式

2.16. 闭包

2.17. ESM、CJS构建

2.18. async的作用

2.19. 统计代码运行时长

console.time(’test’) — 开启一个计时器

console.timeEnd(’test’) — 结束计时并且将结果在 console 中打印出来

2.20. 可选链操作符

2.21. toSorted()

const nums = [1, 2, 16, 35, 44, 100, 27, 0]
const newNums = nums.toSorted()
console.log('newNums---', newNums)
输出：[0, 1, 100, 16, 2, 27, 35, 44]

为啥输出结果没有成功排序？

2.22. 按位非（~）🔸

按位非（~） - JavaScript | MDN (mozilla.org)

按位非（~）是一个位运算符，它的作用是对一个数的每个位取反，即0变为1，1变为0。在JavaScript中，对一个数取按位非相当于对这个数取反后再减1。

2.23. 二分查找算法

2.24. 链表 LinkedList 🔹

链表（LinkedList）是一种常见的数据结构，它由一系列节点组成，每个节点包含两部分：数据和指向下一个节点的引用。

常见的有单向链表和双向链表，单向链表中的每个节点只有一个指向下一个节点的引用，双向链表中每个节点都有两个引用，分别指向前一个节点和后一个节点。

链表的实现原理，主要依靠节点之间的引用关系。链表的头部指向第一个节点，而最后一个节点的指针指向 null。这样，当需要遍历链表时，只需从头部开始，依次沿着指针向下移动即可。

举个例子，假设我们有一个单向链表，其中包含节点 A、B、C 和 D，它们依次相连：

A -> B -> C -> D -> null

如果要查询链表中的某个节点，需要从头节点开始，沿着指针依次移动，直到找到目标节点或者到达链表末尾。

如果要删除或者插入节点，则需要调整相邻节点之间的引用关系，以保持链表的连续性。

与 ArrayList 相比，LinkedList 在查找和修改操作方面效率较低，因为需要遍历整个链表才能找到目标元素，但在增加和删除操作方面效率更高，因为不需要移动元素。

2.25. 动态规划

斐波那契数列

https://zhuanlan.zhihu.com/p/365698607

2.26. return、break和continue 🔹

1. return语句终止函数的执行，并返回一个指定的值给函数调用者。

2. break语句中止当前循环，switch语句或label语句，并把程序控制流转到紧接着被中止语句后面的语句。中止外层循环，需使用label语句，在外层for循环前加上outer，然后使用break outer实现。

3. continue声明终止当前循环或标记循环的当前迭代中的语句执行，并在下一次迭代时继续执行循环。

2.27. 右移运算符 »

为什么使用位右移运算符 » 0 实现可以实现取整？

在计算机中，位右移运算符 >> 只能用于整数类型，因此无法直接对浮点数进行位右移操作。如果尝试对浮点数进行位右移操作，编译器通常会将浮点数转换为整数，然后进行位右移操作。

在这种情况下，5.5 将被转换为整数 5，然后进行位右移操作。由于位右移操作是整数运算，结果也是整数，因此结果将是整数 5，而不是浮点数 5.5。

2.28. 位移运算符

« 、»、»>

2.29. 赋值运算符

&=

2.30. 表达式和运算符

表达式和运算符

2.31. JS向上取整、向下取整、四舍五入

2.32. 字符串、数组截取 🔹

1. String.prototype.split() 方法接受一个模式，通过搜索模式将字符串分割成一个有序的子串列表，将这些子串放入一个数组，并返回该数组。
2. Array.prototype.splice() 通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容。
3. Array.prototype.slice() 返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。
4. Array.prototype.toSpliced() 是 splice()方法的复制版本。它返回一个新数组，并在给定的索引处删除和/或替换了一些元素。

2.33. 为什么Math.max(…[ ‘’, ‘’,’’ ])的值为0 🔹

这行代码使用扩展运算符将数组 ["", "", "", ""] 展开成参数列表，相当于 Math.max("", "", "", "")。由于 Math.max() 方法会将所有参数转换为数字再比较大小，空字符串会被转换为数字 0，因此最终比较的参数为 Math.max(0, 0, 0, 0)。

在 JavaScript 中，空字符串会被转换为数字 0 是因为在进行字符串转换为数字的过程中，如果字符串包含非数字字符（除了符号、小数点等特殊字符），则会被转换为数字 0。

当 JavaScript 引擎在转换字符串为数字时，会按照以下规则进行处理：

1. 如果字符串中包含非数字字符（除了符号、小数点等特殊字符），则转换结果为 NaN（Not-a-Number）。
2. 如果字符串为空字符串或只包含空格字符，则转换结果为数字 0。
3. 如果字符串表示整数或浮点数形式的数字（例如 “123”、“3.14”），则会按照对应的数字进行转换。

因此，空字符串会被转换为数字 0 是因为它不包含任何数字字符，符合规则2的转换规则。

2.34. 数组转字符串

to.String()

toLocaleString()

join()

2.35. ==和===的区别

2.36. String()和new String()的区别

2.37. 字符串强制转换

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String#字符串强制转换

2.38. 超长String转number精度丢失问题 🔹

在实现算法题时，遇到最后数字相加的值和预期的值不一致，因为使用的Number(str)方法，有一定的区间限制，会出现精度丢失。修改为使用BigInt实现，可以表示任意大的整数，但是BigInt在表示时，后缀会有一个n，这样的话就没办法直接和Number类型的数字进行运算，只能Number转为BigInt来运算，拿到结果之后再进行下一步处理。

2.39. JavaScript中splice、slice和split含义和区别？

2.40. JSON.stringify()实现原理了解

2.41. Base64算法

什么是Base64算法？——全网最详细讲解-CSDN博客

2.42. hex、binary、ascii和base64

Hexadecimal (hex)是一种基于16的数字系统，使用数字0-9和字母A-F来表示数值0-15。它常用于表示二进制数据的编码。

Binary (binary)是一种基于2的数字系统，使用数字0和1来表示数值。它是计算机中最基本的数字系统，用于表示所有的数据和指令。

ASCII (American Standard Code for Information Interchange)是一种字符编码标准，用于将字符映射为整数。每个ASCII字符都有一个对应的整数值，范围从0到127。

Base64是一种编码方式，用于将二进制数据转换为可打印的ASCII字符。它将3个字节的二进制数据编码成4个字符，通常用于在网络传输中传递二进制数据。

2.43. 索引、下标

2.44. 哈希表

2.45. 栈 🔹

栈是一种后进先出（LIFO）的数据结构，**类似于我们在现实生活中处理堆叠的物体的方式。**栈的主要操作包括将元素压入栈（push），从栈中弹出元素（pop），和查看栈顶元素（peek）。

2.46. 枚举

2.47. export

2.48. 严格模式

2.49. @ts-ignore

2.50. const、let和var

2.51. 自增（++）运算符

2.52. 什么是 F#

2.53. TypeScript中元组的基本使用

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

2.54. switch 和 if else 哪个效率高 🔹

在大多数情况下，switch 语句的效率通常比 if else 语句要高。这是因为 switch 语句使用了跳转表来查找符合条件的分支，而不是逐个比较条件。跳转表实际上是一个数组，通过将条件值作为索引，可以直接访问到对应的目标地址。因此，跳转表的查找方式具有固定的时间复杂度 O(1)，无论有多少个分支，查找时间都是恒定的。

相比之下，if else 语句需要逐个比较条件，如果有多个条件，它的查找时间将随着条件数量和复杂度的增加而增加。在最坏的情况下，if else 语句的时间复杂度可能达到 O(n)，其中 n 是分支的数量。

然而，在实际应用中，仍然需要根据具体的场景来选择使用 switch 还是 if else。如果条件是固定的值，且分支数量较多，建议使用 switch 语句。如果条件是动态的，并且需要进行更复杂的条件判断，建议使用 if else 语句。

3. Network

3.1. axios获取数据，报错的JSON数据没有返回到catch里面

3.2. axios实现自动设置cookie

3.3. axios中断已发出的请求，简单示例验证

3.4. DNS、URL、IP、TCP、HTTP

3.5. 从输入 URL 到页面加载完成，发生了什么？

3.6. XMLHttpRequest

3.7. FTP

3.8. file://

3.9. Sentry没有8443端口之后

Sentry没有8443端口之后，可以使用Sentry cli登录，自动化上传SourceMap了？为啥？

3.10. PATCH、PUT和POST方法的区别？🔹

幂等：任何数量的重复、相同的请求都会使资源处于相同的状态。

以上内容来源于www.mozilla.org。

3.11. 状态码 🔹

项目中有些接口，请求的资源大小有200KB之多，在前端页面交互使用上体验很差，而这些资源通常都不会改变，频繁去请求作用不大，徒增服务器负担。为了解决这个问题，引入HTTP 304 状态码机制，当浏览器发起一个条件请求到服务器时，服务器会使用304状态码来表示请求资源未更新，可以直接使用当前缓存的资源，无需再重新从服务器下载。

1. 背景、初衷和目标：304状态码主要是为了减少不必要的网络请求，减少服务器负担和提高性能而设计的。当客户端发起条件请求时，服务器可以通过304状态码告知客户端，所请求的资源未发生变化，可以直接使用当前缓存的资源。

2. 优势和劣势：优势：可以减少网络请求加快前端页面加载速度，降低服务器负担。劣势：如果配置不正确，可能导致前端页面展示的不是最新的数据。

3. 使用场景： 适用于请求资源过大的业务场景，或者图片、样式等静态资源。

4. 组成部分和关键点：前端发起的条件请求时需要在请求头中包含条件标识，如If-Modified-Since、If-None-Match等，服务器收到请求后，判断资源是否有更新，如果没有更新会返回304状态码。

   如下所示：

   GET /example.html HTTP/1.1
   Host: www.example.com
   If-None-Match: "abc123"
   If-Modified-Since: Fri, 24 Nov 2023 01:27:35 GMT
   
   HTTP/1.1 304 Not Modified
   

5. 底层原理和关键实现：当服务器收到前端发起的请求之后，会比较请求中的条件标识和资源的最后更新时间或实体标签，判断资源是否有更新，如果没有更新则返回304状态码，否则会返回200状态码和最新的资源内容。

6. 已有的实现和对比： 大多数主流的web服务器和浏览器都支持304状态码，如Apache、Nginx、IIS等。与传统的200状态码相比，304状态码能更有效地利用缓存，减少不必要的网络请求和降低服务器资源负担。

要验证服务器是否正确处理304状态码，可以打开浏览器的开发者工具中切换到 Network（网络）选项卡，查看指定的网络请求，在第一次请求之后的请求，是否显示 304 Not Modified ，然后其 Size 和Time 是否较少。如是，就说明在请求时，是使用了浏览器自身的缓存而不是重新从服务器下载资源。

3.12. Fetch API

3.13. HTTP请求行、请求头、请求体、响应行、响应头、响应体详解

4. Git

4.1. git clone -b ${1:-dev}

4.2. gitlab 仓库迁移 🔹

 git clone --mirror url
 git remote set-url –-push origin url
 git push --mirror 

然后会出现提示没有权限的问题，如下图所示：

remote: GitLab: You are not allowed to force push code to a protected branch on this project.

需要打开GitLab，在项目设置那里，开启允许强制更新开关，然后再运行命令git push --mirror即可。

4.3. git pull放弃本地修改，强制更新 🔹

git fetch --all
git reset --hard origin/master
git clean -f -d

1. git fetch --all：从远程仓库获取最新的内容。
2. git reset --hard origin/master：将本地仓库的内容重置为与远程仓库相同，包括放弃任何本地修改。
3. git clean -f -d：清除工作目录中未跟踪的文件和目录。

4.4. git clone fatal：发送请求时出错 🔹

在使用git clone项目时，提示以下信息，然后一直需要提示输入用户名和密码。

fatal: 发送请求时出错。
fatal: 服务器提交了协议冲突. Section=ResponseStatusLine

从上面可知，应该是git配置上面出现了问题，所以就打算将git配置初始化，通过以下命令查看git配置文件所在位置，并将所有.gitconfig文件全都删除。

git config --list --show-origin

重新打开Git Bash Here，使用以下命令，然后配置Git在本地存储凭据信息，以便自动记住用户名和密码，避免每次进行Git操作时都需要输入凭据信息。

git config --global credential.helper store

然后只要输入一次用户名和密码，后续操作就都不需要输入了。

4.5. git命令出现“fatal: 发送请求时出错”错误 🔸

fatal: 发送请求时出错。 fatal: 服务器提交了协议冲突. Section=ResponseStatusLine

4.6. git clone xxx not found 🔹

在使用git从gitlab下载项目的时候，出现以下这个报错问题：

fatal: repository 'https://gitlab.xxx.com/xxx/web/project-name/' not found

因为URL是copy的，所以不会弄错，猜测应该是用户名和密码异常，所以使用以下命令进行配置：

git config --global user.name "xxxx"
git config --global user.password "xxxx"

发现还是失败了，就想着怎么触发用户民和密码输入那个弹窗。看了一下发现使用的URL其实是没有.git结尾的，修改了一下clone的命令为：

git clone https://gitlab.xxx.com/xxx/web/project-name.git

此时，触发了用户名和密码输入弹窗，填入正确信息即可，问题解决。

4.7. git命令窗口样式美化 🔹

用了七八年的东西，一直没有关注样式问题，只觉得还行，但是最近安装nvm，发现一下字体看不清，就看下怎么设置样式，才发现这个可以右键Options然后进行设置，除了字体颜色、背景色，还有主题可选，但是试用了一下，不够美观，如下所示：

在网上查了一下，发现这个样式还不错。Git Bash界面的美化（一看必会）_git bash美化-CSDN博客，配置流程就是修改.minttyrc文件，位置在C:\Users\weihao，将里面的使用#注释，然后复制样式覆盖即可。

4.8. git 切换分支 🔹

1. git branch 查看当前分支
2. git branch -r 查看远程仓库的分支列表
3. git checkout 切换到已存在的分支
4. git checkout -b 创建并切换到新分支

在切换分支前，确保你的工作目录是干净的（没有未提交的更改）。如果有未提交的更改，可以使用git stash命令将其暂存起来，然后再切换分支。

5. npm

5.1. 怎么通过Vue3项目相关配置，知道其依赖的node和npm版本

5.2. node和npm是什么关系

5.3. 为什么npm升级之后不做向前兼容，老项目需要依赖指定版本才可以正常运行

5.4. npm install 命令 整个流程是什么样子的

5.5. npm run dev 命令整个流程又是什么样子的

5.6. --force 和 --legacy-peer-deps 的区别是什么

5.7. npm、node怎么做到前端组规范

5.8. npm 升级至最新命令 npm install -g npm@latest

5.9. npm 安装指定版本命令 npm install npm@6.14.15 -g

5.10. Error: Command failed with ENOENT: npm run clean🔹

在维护部门内部的API库时，出现执行命令报错，如下所示：

node:internal/errors:477
    ErrorCaptureStackTrace(err);
    ^
Error: Command failed with ENOENT: npm run clean
spawn npm run clean ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:478:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn npm run clean',
  path: 'npm run clean',
  spawnargs: [],
  originalMessage: 'spawn npm run clean ENOENT',
  shortMessage: 'Command failed with ENOENT: npm run clean\nspawn npm run clean ENOENT',
  command: 'npm run clean',
  exitCode: undefined,
  signal: undefined,
  signalDescription: undefined,
  stdout: '',
  stderr: '',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}

从报错信息可知，代码在执行到npm run clean命令时报错了，提示找不到这个命令，但是我复制命令在终端运行是成功的，在windows10系统是没问题的，但我在mac系统上运行就报错了，执行代码如下所示：

await execa('npm run clean')

初步猜测，可能execa用法在mac环境中不生效。将其注释，没有提示报错，所以，接着就要研究如何在mac环境中使用execa了。只需将

execa('npm run clean') 

改写为

execa('npm', ['run', 'clean'], { shell: true })

即可，这时，我们就会想知道这两种用法有什么区别呢？

execa是一个用于执行shell命令的Node.js模块，它可以将命令作为参数传递给它，并返回一个Promise，以便在命令执行完成之后处理。根据报错提示没有找到npm命令，很有可能是execa模块无法正确识别到环境变量。

所以将npm run clean拆分为npm和run clean两个参数，并将 shell 选项设置为true，以便在子进程中运行命令的时候使用默认的shell，这样可以正确找到npm命令并且识别环境变量，找到npm命令。

5.11. npm i 时卡住了🔹

在使用npm i命令给项目安装依赖时，出现卡住的情况，等了好久，也没见成功或者中断，这就无法入手去解决问题。使用命令npm install --verbose可以看到安装的更多信息，便于排查问题。

5.12. 在windows环境使用git安装nvm 🔹

因公司电脑做了软件安装限制，导致不能使用.exe方式配置nvm工具，但是平时项目开发中，经常需对老项目使用不同的node版本，所以这个工具还是很重要的。确定研究一下有没有其他方式配置nvm，在github上看到有Git Install章节，用法是要git clone项目源码下来，然后配置，但是现在github一直clone不了项目，所以就去gitee上看了一下，发现有这个仓库nvm-cn: 🧊 nvm国内安装工具 (gitee.com)，用法很简单，只需要在Git Bash Here上使用以下命令即可安装：

bash -c "$(curl -fsSL https://gitee.com/RubyMetric/nvm-cn/raw/main/install.sh)"

然后验证一下，使用命令nvm ls，如下所示：

使用nvm命令时只能在Git Bash Here上使用，在Windows PowerShell和CMD命令窗口是使用不了的。

安装新版本

nvm install 20.11.1

切换版本

nvm use 16.14.2

指定默认的Node版本，使用一下命令：

nvm alias default 16.14.2

问题：git bash here每次启动都很慢。

Git Bash extremely slow start up on Windows - Super User

5.13. npm elasticdump

5.14. npm install xxxx –legacy-peer-deps

npm install xxxx –legacy-peer-deps 解决依赖冲突 （https://bbs.huaweicloud.com/blogs/349716?utm_source=zhihu&utm_medium=bbs-ex&utm_campaign=other&utm_content=content）

5.15. npm、yarn、pnpm 幽灵依赖

5.16. pnpm 的 workspaces 方案

5.17. npm config set设置了新的npm私有源，但是一直没有生效🔹

npm install 自己vue next模版，出现封装的库引向的是192.168.24.XXX的npm私有源，使用命令npm config set设置了新的npm私有源112.230.193.XXX，但是一直没有生效，总是报错如下：

原因是因为package-lock.json里面的是192.168.24.XXX的npm私有源，虽然在终端运行命令npm config set设置新的npm私有源路径，但npm install时，读取的还是package-lock.json里面的，起因是npm私有源路径有改动，这个模版没有及时进行更新。涉及到的知识点可以是package-lock.json和package.json的异同。package.json是对项目的高级描述，用于指定项目的基本信息和依赖包的版本范围，而package-lock.json是由npm自动生成和维护的文件，用于确保项目在不同环境下安装的依赖包的版本一致性，在实际开发中，我们只需要编辑和维护package.json文件，而package-lock.json文件会在每次执行npm install命令时自动更新。

5.18. Rollup5.50

5.19. esbuild

5.20. “@zws/vue-next”: “workspace:5.40 "

“@zws/vue-next”: “workspace:5.40 “这个用法为什么会失败？原因是pnpm的workspace用法上面有问题。

5.21. npm -D -dev -g

5.22. pnpm 的 monorepo

5.23. 什么是npx？🔹

因为最近在项目Vue3中集成Sentry前端异常监控系统，看到官方文档里有使用npx的指令，就去了解了一下。当你在项目中使用npx执行一个命令时，npx 会在当前项目的的./node_modules/.bin目录下查找是否有对应可执行的命令，没有找到的话再从全局环境查找是否有安装对应的模块，如果全局环境中没有，会创建一个临时目录，并在其中下载对应的模块，命令执行完毕后临时目录会被删除，不会占有本地资源。这种机制可以确保在执行命令时使用最新的模块，并且不会对全局环境造成过多的污染。

5.24. 使用npm install package@latest 时，安装的是V1.6.0还是V1.6.1-beta ？🔹

在部门搭建私有npm仓库，对一些组件库和工具库进行管理，但是出现有同事使用package@latest下载到了beta版本，研究了npm发包机制知道问题出在哪里，因为在发布版本时，都是使用npm publish命令的，所以事实上V1.6.0-beta只是名称改为了-beta而已，要解决这个问题，后续beta版本发布时，需要使用命令npm publish --tag beta。官方文档如下Adding dist-tags to packages | npm Docs (npmjs.com)。

6. Vue

createWebHashHistory

6.1. vuepress 2.x 打包流程机制，以及md文档越来越多，打包特别慢的原因

6.2. Chrome使用http访问会强转为https的问题 🔹

使用Chrome访问HTTP网站时，若浏览器自动转为HTTPS导致访问失败，可尝试以下步骤解决：

1. 在Chrome浏览器地址栏输入chrome://net-internals/#hsts并回车。
2. 找到页面中的Delete domain security policies部分。
3. 输入导致问题的网站域名。
4. 点击Delete按钮删除该域名的安全策略。

完成上述步骤后，Chrome将不再自动将HTTP请求转为HTTPS，从而解决强转为https的问题。

6.3. Chrome 调试鼠标悬停后出现的元素 🔹

在Vue Next项目开发过程中，我们需要调试一些鼠标悬停才会出现的元素，比如Element Plus 里的 <el-dropdown> 组件，如要修改它下拉菜单的背景色，可使用鼠标悬停显示下拉框，然后按下快捷键 Ctrl + Shift + C 触发视图查看，再点击下拉框即可获取Class名称进行修改，如下所示：

6.4. pixijs

https://pixijs.com/

6.5. vue-i18n Must be called at the top of a setup function

在使用vue-i18n的时候，因为是在组合式函数.ts文件中使用的，所以，报错显示如下信息：

Must be called at the top of a `setup` function

6.6. 升级package.json中全部依赖包到最新版本 🔹

在Vue项目package.json中，要将全部依赖包升级至最新版本，可以使用工具npm-check-updates实现，如下所示：

全局安装

npm install -g npm-check-updates

或者，npx安装

npx npm-check-updates

检查并显示最新版本

ncu -u

重新安装

npm install

至此，完成。

6.7. el-table-column中设置type为selection，align为center，异常问题 🔹

Element Plus组件库的Table表格组件，在设置el-table-column的type为selection，align为center时，出现只有表头居中了，但是内容没有居中，排查了一下原因，是因为在自行封装的Table组件中，设置了show-overflow-tooltip，虽然已经过滤了type为custom的情况，但是缺少了过滤selection的情况，所以勾选框多了一个el-tooltip的样式，导致center不生效。

6.8. 自行封装的Table组件，顶部边框线没有显示问题 🔸

自行封装的Table组件，顶部边框线没有显示，排查了一下，问题出在.el-table .el-table__cell这个样式，因为我们自己封装的组件库，样式文件来源都会有@xxx标识的，而这个的引用则是index-5c8207ce.css，初步判断是Element Plus官方样式。对比其他项目也是用的这个组件库，是没有这个问题的。Element Plus版本号也是一样的，所以猜测应该是Element Plus样式问题。检查了一下该项目，发现引用的样式是很久以前Beta版本，用来自定义主题的样式的，替换成Element Plus默认用法import 'element-plus/dist/index.css'，发现问题解决了。

6.9. Cannot find module xxx or its corresponding type declarations. 🔹

在Vue3项目的vite.config.ts中设置别名之后，在.vue文件中引入会报红提示这个没有找到的错误，验证了下，虽然不影响功能使用，但是体验不好。

VSCode中使用Ctrl+Shift+P，然后输入type，选择Volar:Select TypeScript Version...，然后选择Use Workspace Version xxx即可。

6.10. 百度网站不支持iframe问题

6.11. 查看Vue3项目所需的node和npm版本

如果我新接受一个vue项目，我怎么知道应该使用哪个版本的node和npm去npm install安装依赖的？

6.12. Package.json中依赖库版本号前缀^和~的区别？🔹

在了解^和~区别之前，我们需要在语义化版本 2.0.0 | Semantic Versioning (semver.org)上了解项目版本号规范。根据语义化版本规范，一个版本号由三个数字组成，用点号分隔，格式为"主版本号.次版本号.补丁版本号”，例如版本号2.5.6。以下是对每个数字的含义：

1. 主版本号：当进行大规模的API变更或不兼容的改动时，增加主版本号。这意味着新版本可能会导致现有代码无法正常工作。
2. 次版本号：当添加新功能，但保持向后兼容时，增加次版本号。新版本引入的改动应该可以与旧版本的代码兼容。
3. 补丁版本号：当进行小的bug修复或性能优化等不影响现有功能的改动时，增加补丁版本号。补丁版本号的更新应该不会引入新的功能或破坏现有功能。

在package.json文件中，dependencies字段用于指定项目所依赖的包及其版本。在这些依赖项的版本号中：

1. ^符号：允许安装指定版本的最新次要版本，但不包括更高的主要版本。例如，如果依赖项的版本号为^1.2.3，那么运行npm install命令时，将安装1.2.3版本的最新次要版本，例如1.2.4、1.3.0，但不会安装2.0.0版本。
2. ~符号：允许安装指定版本的最新补丁版本，但不包括更高的次要版本。例如，如果依赖项的版本号为~1.2.3，那么运行npm install命令时，将安装1.2.3版本的最新补丁版本，例如1.2.4，但不会安装1.3.0版本。

总结起来，^符号允许安装指定版本的最新次要版本，而~符号允许安装指定版本的最新补丁版本。

6.13. 无头浏览器

6.14. 在线地图坐标系转换工具使用🔹

因项目开发计划使用Bing Maps地图替换百度地图，所以就需要考虑坐标转换的问题，否则定位会出现偏差，当前在 www.lddgo.net 上面发现有坐标系转换工具，就使用了一下，进行验证。

1. Bing Maps转百度地图国内地址：GCJ02 -> BD09 偏差几米左右
2. Bing Maps转百度地图国外地址：WGS84 -> BD09 偏差几米左右
3. 百度地图转Bing Maps国内地址：BD09 -> GCJ02 偏差几米左右
4. 百度地图转Bing Maps国外地址：国外地址不需要转换，直接用 偏差几米左右

6.15. 国际化地图技术选型

因为项目业务后续会涉及国外市场，导致项目地图要能在国外使用，有客户反馈在国外定位，搜索地址没有找到，

6.16. 雪碧图

6.17. 变量提升

Hoisting（变量提升） - MDN Web 文档术语表：Web 相关术语的定义 | MDN (mozilla.org)

以下是对您列出的各个Vue.js相关主题的简要解释：

6.17.1. v-bind="$attrs”

在Vue.js中，v-bind="$attrs"是一个特殊的绑定，它可以将父组件中没有被作为prop声明的属性（attribute）自动传递给子组件的根元素。这在创建封装组件时非常有用，可以确保所有传递给组件的属性都被正确地应用到组件的根元素上，而不需要在子组件中显式地定义每个prop。

6.17.2. unplugin-vue-define-options

unplugin-vue-define-options 是一个Vue.js插件，它允许开发者在单文件组件（SFC）中定义组件选项，而无需使用export default语法。这可以在某些情况下简化组件的编写，尤其是在使用TypeScript时，可以减少样板代码。

6.17.3. 在 Vue6.16.3 中，onTrack 和 onTrigger 的区别？

在Vue 3.6中，onTrack和onTrigger是用于调试的钩子，它们与Vue的响应式系统相关。

• onTrack：当组件的渲染响应式依赖被追踪时调用。这个钩子可以用来了解哪些响应式属性被组件的渲染所依赖。
• onTrigger：当响应式属性被修改时调用，可以用来了解响应式属性的变动是如何影响组件的。 这两个钩子有助于开发者更好地理解响应式系统的行为，尤其是在进行性能优化时。

6.17.4. vue-next.umd.cjs

vue-next.umd.cjs通常指的是Vue.js下一个主要版本的UMD（Universal Module Definition）构建的CommonJS版本。UMD是一种模块定义方式，使得代码可以在客户端和服务端不同的环境中运行。.cjs扩展名表明这是一个CommonJS模块，通常用于Node.js环境。

6.17.5. ‘ztpcTablePagination.value.pageSize’ is possibly ‘undefined’.ts(18048)

这个错误信息来自TypeScript编译器，它提示开发者在使用ztpcTablePagination.value.pageSize时，这个值可能是undefined。为了解决这个问题，开发者需要确保在使用pageSize之前它已经被正确地初始化或检查了其是否为undefined。可以使用TypeScript的非空断言操作符!或者显式的类型守卫。

6.17.6. Vue Spa单页面的加载过程

Vue单页面应用（Single Page Application, SPA）的加载过程通常包括以下步骤：

1. 下载入口HTML文件：用户访问Vue SPA时，浏览器首先下载入口HTML文件。
2. 加载JavaScript主文件：HTML文件中通常会包含一个或多个JavaScript文件链接，这些文件包含Vue框架和应用代码。
3. 初始化Vue实例：JavaScript文件加载完成后，Vue实例被创建并挂载到DOM上。
4. 路由解析：Vue Router（Vue.js的路由库）解析URL，确定应该显示哪个组件。
5. 组件渲染：根据路由，相应的组件被渲染到页面上。
6. 数据获取：组件可能需要从服务器获取数据，这通常通过API请求完成。
7. 更新视图：一旦数据被获取，视图会根据数据更新。 这个过程使得用户在浏览SPA时，不需要重新加载整个页面，只需更新必要的部分，从而提供了更加流畅的用户体验。

6.18. Vue3项目模版升级至Vite5，Element Plus组件库国际化问题🔹

X [ERROR] No known conditions for “./lib/locale/lang/zh-cn” specifier in “element-plus” package [plugin vite:dep-scan]

Vue3项目模版，打算部署至Sentry前端监控系统试用，然后就运行项目，因为nodejs版本升级到了v18.18.0，出现一些依赖不兼容的问题，就打算趁这个机会升级至Vite5，然后就遇到了Element Plus组件库国际化问题，研究了一下，是用法上面有了变化导致的，具体可以看这个issue，[i18n] [All] [plugin:vite:import-analysis] No known conditions for “./lib/locale/lang/zh-cn” specifier in “element-plus” package · Issue #13609 · element-plus/element-plus (github.com)，方案就是：

// 2.3.7以及之前的用法
import zhCN from "element-plus/lib/locale/lang/zh-cn";
import en from "element-plus/lib/locale/lang/en";

// 2.3.8之后的用法
import zhCN from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";

6.19. 掘金小册子《你不知道的 Chrome 调试技巧》🔹

掘金小册子《你不知道的 Chrome 调试技巧》是免费的，里面主要是讲了一些Chrome DevTools的使用技巧，今天看完，主要是记录了下一些印象比较深的点：

1. 全屏截图，通过 Capture full size screenshot 命令。
2. 取色器，Chrome DevTools 自带取色器，之前一直没注意。
3. console.table（） 可以将对象或数组以一个表格方式打印出来，方便查看。
4. console.log({value1,value2,value3}) 当想打印多个值时，要区分总是要加上前缀，其实通过{}就可以以对象的格式打印出来。
5. console.log()并没有立即拍摄对象快照，它只是存储一个指向对象的引用，在代码返回事件队列时才去拍摄快照。 使用 JSON.stringify() 方法处理打印的结果。

6.20. <el-cascader />导致 Out of Memory 的原因分析

6.21. 在 HTML 中，<div />和<div><div />的区别

两种不同的语法形式，具有不同的含义。

setx PUB_HOSTED_URL https://pub.flutter-io.cn
setx FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

flutter config --android-sdk E:\Data\SDK\AndroidSDK

 Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-7.5-all.zip

Loading Wizard failed. Did you provide the right URL?

error: API request failed
  caused by: [60] SSL peer certificate or SSH remote key was not OK (schannel: SEC_E_UNTRUSTED_ROOT (0x80090325))

@ECHO OFF
ECHO Delete Folder: %CD%
PAUSE
SET FOLDER=%CD%
CD ..
DEL /F/Q/S "%FOLDER%\*" > NUL
RMDIR /Q/S "%FOLDER%"
EXIT

(#\s+)(\b\d+(\.\d+)*\b)