xiasohuai的博客

npmrc配置文件.npmrc是一个用于配置 npm 行为的文件。这个文件可以位于多个地方，但最常见的是位于项目目录或者你的用户主目录。npmrc文件由一系列键值对组成，用于配置npm在执行命令时的行为和参数。一个.npmrc。

在npm中，作用域（scope）是一种将一组包组织在一起的方式，可以通过作用域共享包或限制包的可见性。如果一个包的名称以@开头，那么它就是一个有作用域的包。范围是@和斜杠之间的所有内容。如果一直使用相同的作用域，您可能希望在.npmrc文件中设置此选项。如果使用npm init，可以将范围作为选项添加到该命令。要创建有作用域的包，只需使用以作用域开头的包名。

access 默认值：'restricted' 用于范围包，'public' 用于非范围包,类型：空值、"restricted" 或 "public"4.编写和测试代码：npm link 主要作用是在本地项目和本地npm包之间建立连接，方便进行模块测试和开发调试。文件来指定在发布包时应该忽略的文件和目录。这可以帮助你减小包的大小，避免不必要的文件被上传。如果你希望你的范围包可公开查看（和可安装），请设置。安装node和npm，注册npm账号。发布范围包时，访问级别默认为。

通过npm init初始化一个项目，会生成3个目录/文件， node_modules, package.json和 package.lock.json。其中package-lock.json文件是为了锁版本。

在node_modules中，找对应的包，然后查看包中package.json 的main和module。如果用require引入，则修改lib下面的组件，如果是import引入则修改es下面的文件。在使用npm进行安装依赖或者项目构建时，我们可能会遇到一些需要特殊处理的情况。比如说，某些环境下（特别是以root用户身份运行时）执行npm命令可能遇到权限问题。参数后, npm将不再尝试修改正在运行脚本进程权限, 这样可以确保脚本可以按照预期访问文件和执行任务。这个参数主要用于解决此问题的。

然后执行npm install，这事会自动执行npm run postinstall这个命令，也就是执行patch-package，这时候就会去读取上面说的 patches目录，并将那些补丁打到对应的包里，达到同步修改代码的效果。注：要把 patches 这个目录提交到git，别人才可以同步你的修改。2.修改node_modules里面的文件后,然后执行。1、安装patch-package。

事件起因：在微应用点击其他微应用的页面后，回到自己项目导致antd datepicker选择时间无法选中。控制台报错：Unable to preventDefault inside passive event listener invocation，这个警告通常出现在使用passive事件监听器时，当在事件处理函数中调用preventDefault()方法时会引发该警告。在main.js中（或新建js文件，引入到main.js中），重写addEventListener，把passive置为false；

使用Object.hasOwnProperty()代替。hasOwn是es2022新语法，旧浏览器不支持。

【代码】vue3浏览器报错解决Uncaught runtime errors。

vue+vue-matomo实现埋点

在Vue3中没有了EventBus兄弟组件通信，但是现在有了一个替代的方案mitt.js，原理还是 EventBus。

在我们的JavaScript中，可以给元素添加一个点击监听事件，当用户点击的时候，点击事件怎会被执行，这也是一种事件总线的思想在里面，就好比元素订阅了点击事件，用户发布或出触发点击事件。所谓事件总线模式，其实就和发布订阅模式非常类似，比如我们订阅了一个公众号，公众号发布文章之后我们就能收到信息，这就是一种订阅发布的关系。再比如在Vue2项目中，我们可以使用$on、$emit来实现事件的监听和触发，这其实就是一种事件总线的思想在里面，只不过Vue帮我们实现好了。使用$emit发布事件。实现$off取消订阅。

一个为 null 和 undefined 的判断，减少 || 类型的处理，用?使用数组或者字符串的 includes 方法，代替 indexOf 方法。校验多个表单项不能为空，使用策略模式代替 if-else。使用switch，object或者Map代替。利用filter,some,every优化代码。减少没必要的if...else判断。

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。里面有很多针对数组、对象、函数等一些方法。数组去重 union和uniqBy。深拷贝 cloneDeep。防抖 debounce。节流 throttle。

ref和reactive 数据每次修改都会被追踪，都会更新UI界面，也是非常消耗性能的，所以如果我们有一些操作不需要追踪，不需要更新UI界面，那么这个时候我们就可以通过toRaw方法拿到它的原始数据，，这样会优化一些性能。

Pinia.js 是新一代的状态管理器

shallowReative与shallowRef在某些特殊的应用场景下,是可以提升性能的,前者针对对象,用于浅层作用的响应式数据处理,而后者只处理基本数据类型的响应式,不进行对象的响应式处理。

setup 函数中默认定义的变量并不是响应式的（即数据变了以后页面不会跟着变），如果想让变量变为响应式的变量，需要使用 ref 和 reactive 函数修饰变量。区别：reactive只能传入对象类型的参数，所以基本数据类型添加响应式状态只能用ref（当然ref也可以定义复杂的数据）ref 获取数据值需要加.value注：ref底层使用的是proxy代理函数实现双向绑定，proxy 函数必须要接收一个对象，如果想修改 name 的值，需要使用 name.value区别：toRef：只希望转换一个react

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中

export {default as xxx} from xxxxx写法