summary# npm 镜像配置 1. 电脑本地设置地址 C:\user\feng.ruojun\.npmrc 3.

npm、yarn

镜像配置

电脑本地设置地址 C:\user\feng.ruojun.npmrc
命令查看当前镜像：npm config get registry
安装时失败需要强制安装可以使用--legacy-peer-deps 指令代替--force更安全。而--force会暴力解决冲突
命令来设置 npm 的仓库地址npm config set registry 。如设置淘宝镜像npm config set registry registry.npm.taobao.org/ 还原官方镜像npm config set registry registry.npmjs.org/

npm全局安装地址

查看全局安装路径：npm config get prefix。// D:\nodejs\node_global 如果全局安装依赖成功后，找不到安装的内容，需要把这个地址配置在环境变量中
设置全局安装路径：npm config set prefix "D:\nodejs\node_global"
同时要设置缓存路径：npm config set cache "D:\nodejs\node_cache"
环境变量配置：D:\nodejs\node_global
查看全局安装了哪些依赖：npm list -g

yarn全局安装地址

查看yarn bin目录:yarn global bin // D:\nodejs\node_global\bin 
查看yarn的全局安装位置:yarn global dir // D:\nodejs\yarn\global 这个路径最好要和yarn bin目录在同一个硬盘分区
设置全局安装路径：yarn config set global-folder "D:\nodejs\yarn\global"
同时要设置缓存路径：yarn config set cache-folder "D:\nodejs\yarn\cache"
环境变量配置：D:\nodejs\node_global\bin 和 D:\nodejs\yarn\global
注意：yarn bin目录和yarn全局安装路径在同一硬盘下如D:\nodejs，建议yarn全局安装路径和npm全局安装路径在硬盘下 如D:\nodejs
查看全局安装了哪些依赖：yarn global list

vscode

Vue

1、浏览器查看Vue实例：F12 Elements定位到vue挂着的元素上面，右键存为全局临时变量，Store as global variable,通过temp1.__vue__访问vue实例。

2、Vue3路由组件开发时，如果在组件内使用了definePage({name:'ai-generate',}),name属性绝对不能重复，否则会出现没有任何报错，但是页面加载不了的情况，排查艰难

3、Vue3 通过计算属性给类绑定变量

<template>
    <div class="btn" ></div>
</template>
<script setup>
import { computed, ref } from 'vue';
const computedClass = computed(() => '#fff');
</script>
<style scoped lang="scss">
    .btn {
        color:v-bind(computedClass);
    }
</style>

3、Vue3 v-debounce

// 全局注册

4、Vue3 数据响应式

在created 给data的某个数据添加一个数据时使用Vue.set(Obj,'list',res.data) // data是接口返回的数组
若不是异步的可以直接使用this.Obj.list = [{id:'123'}]，若是异步这样添加就不是响应式的了。但可以先声明 this.Obj.list = [{id:'123'}] // 非空数组，请求数据后赋值this.Obj.list = res.data。因为在c是在收集依赖之前执行的，会被vue加工成响应式数据。后重新赋值就是响应式的了。
如果不是在created 声明this.Obj.list = [{id:'123'}] 则数组不是响应式的，因为created之前数据还没有收集，created之后就已经完成收集了，在去声明就不会加工成响应式数据了，需要使用Vue.set方法或者this.$set来添加响应式数据。
vue2 data 的数组直接重新赋值也是响应式的。Vue 2 能检测到你对数组引用的**直接替换**操作，并触发视图更新。这是因为 Vue 的响应式系统是基于对 `data` 属性的 **Setter** 进行监听的。当你执行 `this.array = newArray` 时，相当于调用了这个数组的 Setter。

5、Vue3 数据响应式 input的双向绑定

v-for的key 不能是v-model双向绑定input的值，否则没输入或删除一个字符串，就会导致页面重新渲染，软键盘就会收起。无法做到连续输入。

react

引入svg的方法

// 1、直接作为 `img` 标签的 `src`：
import React from 'react';

function App() {
  return (
    <div>
      <img src="/path/to/your/image.svg" alt="SVG Image" />
    </div>
  );
}

export default App;

// 2、作为 React 组件导入
// `react-scripts` 版本与 `@svgr/webpack` 冲突。如果安装了@svgr/webpack发现有报错，
// 可以删除node_modules package-lock.json yarn.lock 清楚缓存npm cache clean --force 重现安装依赖解决

import React from 'react';
import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      <Logo />
    </div>
  );
}

export default App;

// 如果你有多个 SVG 图片，并希望将它们作为 React 组件引入并进行封装，以便更方便地使用，可以通过以下方法实现：
//1.  将 SVG 文件放入 `src/assets/icons` 目录。
//目录结构
src/
├── assets/
│   └── icons/
│       ├── HomeIcon.svg
│       ├── UserIcon.svg
│       ├── SettingsIcon.svg
│       └── index.js  // 统一导出文件
├── components/
│   └── Icon.js       // 封装后的 Icon 组件
└── App.js

// 2.  在 `src/assets/icons/index.js` 中统一导出所有 SVG 组件：
export { ReactComponent as HomeIcon } from './HomeIcon.svg';
export { ReactComponent as UserIcon } from './UserIcon.svg';
export { ReactComponent as SettingsIcon } from './SettingsIcon.svg';

//3.在 `src/components/Icon.js` 中封装一个通用的 `Icon` 组件：
import React from 'react';
import * as Icons from '../assets/icons';

const Icon = ({ name, ...props }) => {
  const IconComponent = Icons[name];
  if (!IconComponent) {
    console.error(`Icon "${name}" not found`);
    return null;
  }
  return <IconComponent {...props} />;
};

export default Icon;

//4.在 `App.js` 中使用封装的 `Icon` 组件：
import React from 'react';
import Icon from './components/Icon';

function App() {
  return (
    <div>
      <Icon name="HomeIcon" style={{ width: '50px', height: '50px', fill: 'red' }} />
      <Icon name="UserIcon" style={{ width: '50px', height: '50px', fill: 'blue' }} />
      <Icon name="SettingsIcon" style={{ width: '50px', height: '50px', fill: 'green' }} />
    </div>
  );
}

export default App;

    // 3、使用 `svg-inline-loader` 或 `@svgr/webpack`

    // 4、使用 `react-svg`

   // 5、直接将 SVG 代码嵌入到 JSX 中

字体文件使用

// 优设字体文件：https://www.uisdc.com/
// 获取教程：https://baijiahao.baidu.com/s?id=1825939378129940748&wfr=spider&for=pc
// 使用步骤：
// 1、项目中引入
// 2、主css文件声明 @font-face{font-family:YouSheBiaoTiHei;src:url() format(truetype)}
// 3、使用：.text{font-family:YouSheBiaoTiHei;}

css

1、flex 布局最后一个元素靠右

父元素display:flex;
最后一个元素设置：margin: 0 0 0 auto; flex:0 0 auto;

2、css禁用鼠标点击

// cursor和pointer-events放在同一个元素上会导致cursor失效，所以cursor放在父元素上
``` html
<div class="disabled-container">
  <button class="disabled-element">按钮</button>
</div>
```
``` css
.disabled-container {
  cursor: not-allowed; /* 父级设置禁用光标 */
  display: inline-block; /* 保持容器与内容同宽 */
}

.disabled-element {
  pointer-events: none;  /* 禁用子元素事件 */
  opacity: 0.6;         /* 视觉上置灰 */
}
```

git

1、git操作中出现Unlink of file ‘......‘ failed. Should I try again

原因是文件被其他进程占用了，一般是IDE打开了
解决方法是需要先把占用这些文件的进程或者程序关闭，再点击Y,确定，即可顺利往下了

2、.git/index.lock文件已存在

原因是Git 当前正在对索引（index）执行操作
解决方法
1.  如果你确定没有其他 Git 进程正在运行，可以手动删除 `.git/index.lock` 文件。
2.  如果你不确定是否有其他 Git 进程正在运行，可以通过运行以下命令来安全地删除锁文件：

3、git cherry-pick

把每次提交的合并到指定分支
1.  获取最近一次提交的hash： git rev-parse HEAD
2.  切换到需要合并的分支：git cherry-pick hash值
3.  提交到远程：git push

4、git 回退远程仓库代码

使用 reset（重写历史 - 适用于未共享的提交）
1. 本地先回退  git reset --hard <commit-hash>
2. 强制提交到远程仓库 git push origin <branch-name> --force
使用 revert（推荐 - 保留历史记录）
1、git revert <commit-hash>
2、git push origin <branch-name>

5、git 撤销merge

1. git merge --abrot

浏览器

1、使用本地文件替换网站文件

F12 - sources - overrides - Select folder for overrides(随便选择一个文件夹作为替换的临时存储文件)

Network - 筛选点击All - 刷新页面请求需要替换的文件 - 右键需要替换的文件点击override content 在右侧编辑需要替换的文件 CTRL + S保存后刷新页面加载的就是编辑后的文件如果想要阅读方便可以点击文件下方的 {}格式化

Web Worker

1、使用注意事项

不可以操作DOM
与主线程通讯使用postMessage， 传递的是值，不是地址
监听错误，`error` 和 `messageerror`两种方式
worker 线程和主线程都可以关闭## worker 线程：区别是，在主线程手动关闭 worker，主线程与 worker 线程之间的连接都会被立刻停止，即使 worker 线程当前的 Event Loop 中仍有待执行的任务继续调用 `postMessage()` 方法，但主线程不会再接收到消息。
worker 线程中利用 `importScripts()`。通过此方法加载的js文件**不受同源策略约束**！如果引入ESmodule文件发生报错，可以在new Worker时声明是module

indexDB

1、使用注意事项

https://blog.csdn.net/qq_30193097/article/details/131168107

事务型数据库（非关系型），键值对的形式保存，遵循同源策略但不支持DOM操作，空间两百多兆，异步执行
IndexedDB支持事务(transaction)，即操作要么全部执行,要么全部不执行。因此，在执行操作的过程中，只要有一步失败，整个事务就会被取消，数据库会进行回滚，回到事务发生前的状态。

TypeScript

1、使用注意事项

交叉类型

封装方法时使用泛型定义参数，参数为一个对象，对象有一个可选属性，若调用时传入对象可以包含该属性，也可以不包含。
解决方法：使用交叉类型
function foo<T extends object>(arg: T & {onSite?:boolean}){
    if(arg.onSite) console.log(arg.onSite);
}

foo<object>({name:'aaaa',onSite:true})
foo<object>({name:'aaaa',age:22})

ref 声明变量

// 使用ref时，Vehicle不声明所有对象，仅声明一个{}，可以使用Partial，把所有属性变成可选，避免ts检测报错
type Vehicle = {
    id:string
    vin:string
}
const vehicle = ref<Partial<Vehicle>>ref({});

type 和 interface

// 相同点
都可以描述状态、都可以用来约束函数参数和返回值、都支持可选属性?与只读属性（readonly）、都可以在类中实现
    
// 不同点
1、interface 支持声明合并,type不支持
    interface Foo {a:number}
    interface Foo {b:string}
2、interface 通过继承扩展，type通过交叉类型扩展
    interface A extends B {c:number}
    type B = A & {}
3、可描述的类型范围
    interface 只能描述对象结构、函数类型、可调用/可构造对象，不能直接表示原始类型
    type可以为任何描述任何类型
4、实现类
    interface 直接作为类实现的目标，type只能实现对应的对象结构，需要先把它写成对象形状才能implements
    class C implements I {}
    
// 应用场景
1、描述普通对象/类结构使用interface，支持声明合并、实现implements
2、需要后期扩展使用interface，支持多次声明
3、原始类型、联合、交叉、元组使用type，可通过别名声明任意类型
4、统一约定对象结构使用interface，尤其是对外暴露的对象，复杂组合使用type

summary

npm、yarn

镜像配置

npm全局安装地址

yarn全局安装地址

vscode

Vue

react

引入svg的方法

字体文件使用

css

1、flex 布局 最后一个元素靠右

2、css禁用鼠标点击

git

1、git操作中出现Unlink of file ‘......‘ failed. Should I try again

2、.git/index.lock文件已存在

3、git cherry-pick

4、git 回退远程仓库代码

5、git 撤销merge

浏览器

1、使用本地文件替换网站文件

Web Worker

1、使用注意事项

indexDB

1、使用注意事项

TypeScript

1、使用注意事项

1、flex 布局最后一个元素靠右