<%- title %>

--- highlight: a11y-dark theme: orange --- ![前端新人们，这些知识tips你必须要知道.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ac67ad6bcbc4aacb0686f5db2f20d67~tplv-k3u1fbpfcp-watermark.image#?w=900\&h=383\&s=102316\&e=png\&b=2f6ae0) 这篇文章收录了本人在前端学习实践中遇到的一些问题及解决，可供前端新人进行学习和参考，下面先展示一些可能有用的文档/文章/网站： **文档：** 【Chrome 扩展开发文档】：【Docker — 从入门到实践】：【OpenAPI 规范 (中文版]】： **文章：** 【前端系统进阶笔记 & 面试指南】：[https://interview.poetries.top](https://interview.poetries.top/) 【来用Vite+React快速开发浏览器插件】：【前端工程化】配置React+ts项目完整的代码及样式格式和git提交规范】： **网站：** 【jQuery插件库】： ## 1 、关于package.json里面，尖角号（^）和波浪线（\~）的区别在package.json里面，我们可以使用尖角号（^）和波浪线（\~）来表示不同的包版本。这些符号通常被用于定义一个包所需的最小版本或允许更新的版本范围。尖角号（^）通常用于指定主要版本号不变，允许安装新的次要版本和修补程序版本。例如，如果我们在package.json中指定"dependencies"对象的某个包的版本为"^1.2.3"，那么npm将会安装大于等于1.2.3版本，并且小于2.0.0版本的最新版本。波浪线（\~）通常用于指定包的修补程序版本不变，允许安装新的次要版本和主要版本。例如，如果我们在package.json中指定"dependencies"对象的某个包的版本为"\~1.2.3"，那么npm将会安装大于等于1.2.3版本并且小于1.3.0版本的最新版本。总的来说，使用尖角号和波浪线都是为了保证依赖的包可以兼容而又能够及时更新。建议在定义package.json时选择一个合适的版本控制方式来使得项目的依赖关系更加稳定。 ## 2 、执行npm install命令时发生版本冲突问题 ```bash // 执行npm install 命令发现报错：D:\StudySoft\VsCode\code\CODE_Projects\new-cms>npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: panda@1.0.0 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"^17.0.2" from the root project npm ERR! peer react@">=16.9.0" from antd@4.24.8 npm ERR! node_modules/antd npm ERR! antd@"^4.21.2" from the root project npm ERR! peer antd@"4.x" from @ant-design/pro-card@1.0.6 npm ERR! node_modules/@ant-design/pro-card npm ERR! @ant-design/pro-card@"1.0.6" from the root project npm ERR! 1 more (react-dom) ``` 这个报错是因为依赖树出现了问题，可能是由于部分依赖的版本冲突导致的。你可以尝试以下几种方法来解决这个问题： 1. 清空 node\_modules 和 package-lock.json 文件，重新执行 npm install 命令。 2. 使用 npm install --legacy-peer-deps 命令替代 npm install 命令，这条命令会忽略 peerDependencies 的版本限制。 3. 更新 package.json 中的依赖版本号，使其符合 SemVer 规范。 4. 更换包管理器为 yarn 或 pnpm，并尝试再次执行安装命令。如果以上方法不能解决问题，建议检查一下项目中 package.json 中的依赖是否正确，并且检查网络连接状态是否正常。 ## 3、快速定位到某个组件对应的位置步骤 1、项目跑起来后，在地址栏里找到组件关键字： ![f5950d8134010dcbe003e69d76a0624.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5994a00cd4f84ff2b9732dc8d72767ee~tplv-k3u1fbpfcp-watermark.image#?w=1913\&h=967\&s=172835\&e=jpg\&b=fdfdfd) 2、复制项目路由文件夹的相对路径： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15d23824a2544ebcbc7259e8e9e87de0~tplv-k3u1fbpfcp-zoom-1.image#?w=543\&h=855\&s=58888\&e=png\&b=262627) 3、结合组件关键字与路由相对路径，便可快速定位到改组件的路由： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8d89f0c45c740fcac5f2842a952e59d~tplv-k3u1fbpfcp-zoom-1.image#?w=312\&h=548\&s=25664\&e=png\&b=252526) 5、在路由文件里便可清晰地看到组件定义的位置了： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2831b34b6c1b416ea74744a7e23e0388~tplv-k3u1fbpfcp-zoom-1.image#?w=868\&h=697\&s=68383\&e=png\&b=1e1e1e) ## 4、关于CSS的模块化在CSS中，模块化可以通过多种方式实现。以下是几种常见的方法： 1. 命名约定：通过在样式规则中使用特定的命名前缀或后缀来标识该样式规则属于哪个模块。例如，如果您的网站包含一个名为“头部”的模块，您可以使用“-header”后缀来标识所有与该模块相关的样式规则。 2. BEM（块、元素、修饰符）方法：这是一种广泛使用的CSS命名约定，它基于组件化设计的思想。使用BEM，每个模块都被视为一个独立的块（block），其中包含了多个元素（element），并且可以有零个或多个修饰符（modifier）。例如，一个名为“头部”的模块可以定义一个块元素“头部\_\_logo”，以及一个带有修饰符的块元素“头部--transparent”。缺点：这种方式和方面的那种命名约定方式是比较传统的解决方案，但是随着应用规模的增大，命名冲突和代码重复的问题也越来越明显，增加了开发的复杂性和维护难度。 3. CSS模块（CSS Modules）：它是一种官方的CSS模块化解决方案，它利用Webpack、Vite等打包工具，将CSS样式表归档为模块，并自动管理CSS类名的作用域和命名。这使得CSS代码更易于维护和扩展，并且避免了全局污染和命名冲突的问题。在Vue框架的CSS作用域中，采取的是CSS模块（CSS Modules）中的局部作用域（Local Scope）方式。index.module.less 也是一种基于 CSS Modules 的 CSS 模块化方式，它可以在 React 项目中使用，可能产生不灵活的问题，比如如果想声明某个选择器在全局范围内生效，只能使用伪类:global。缺点：使用 CSS Modules 需要借助打包工具，并且需要保证每个组件的类名唯一，否则会影响样式的正确性。此外，CSS Modules 学习成本相对于其他方式较高，需要理解一些额外的语法和配置。 4. CSS-in-JS：这是一种将CSS样式作为JavaScript对象嵌入到组件中的方法。使用CSS-in-JS，您可以将不同模块的样式定义在同一个文件或同一个组件内，并以动态方式根据组件状态或其他条件应用它们。常见的CSS-in-JS库包括Styled Components、Emotion等。缺点：虽然 CSS-in-JS 可以实现组件化的样式定义，并且能够更好地利用 JavaScript 的编程能力，但是需要在项目中引入额外的库和插件，增加了代码的复杂性和学习成本。以上是几种常见的CSS模块化方式，每种方式都有其优缺点和适用场景。选择合适的方式可以让您的代码更具扩展性、可维护性和重用性，提高开发效率并减少错误。 ## 5、关于定义类型时的命名规范规范：大写I开头，每个单词首字母都大写，如果类型是数组，后面加上Item，如： ```ts export interface IOperateInfoItem { action: string name: string createTime: string type: string docnumber: number } ``` ## 6、git clone到本地的项目执行npm install命令报错 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31cd39d18ce64435b580f3ec63556e5b~tplv-k3u1fbpfcp-zoom-1.image#?w=1118\&h=572\&s=62482\&e=png\&b=1e1e1e) 产生原因：权限问题解决办法：（主要就是给node\_global文件夹加权限）之后若仍然安装失败报错，仔细看会发现并不是上述那个报错，而是安装某些包时报错，因为存在预依赖，所以执行npm i -f 强制安装即可： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/129fd0ff1eda41ada0d3c11ec7d9c9fb~tplv-k3u1fbpfcp-zoom-1.image#?w=952\&h=505\&s=57541\&e=png\&b=1e1e1e) ## 7、关于写注释的技巧以双斜杠这种方式写注释时： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/968b3460f8ae45079ceb1ec396436c4c~tplv-k3u1fbpfcp-zoom-1.image#?w=493\&h=123\&s=12804\&e=png\&b=1e1e1e) 导致如果其他地方用到这个变量，鼠标放上去不会有注释提示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dcb143bebd8144e0ab9f90b84882ac26~tplv-k3u1fbpfcp-zoom-1.image#?w=545\&h=168\&s=17040\&e=png\&b=1f1f1f) 但如果以/\*\* \*/这种方式注释时： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24aacf2e53544c74a55c6b259c4e4ec8~tplv-k3u1fbpfcp-zoom-1.image#?w=558\&h=123\&s=13909\&e=png\&b=1e1e1e) 则如果其他地方用到这个变量，鼠标放上去会有注释提示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0932d732f97c45b4810c61adb7fd7d88~tplv-k3u1fbpfcp-zoom-1.image#?w=642\&h=195\&s=22039\&e=png\&b=202020) ## 8、泛型在接口类型定义时的应用对于一些请求，接口返回的数据总有相同的字段，比如下面这种请求分页返回的data总会有current、page、records、searchCount、size、total等几个字段，但是records里面的字段可能就要具体情况具体定义。因此对于这种情况，可以采用泛型，将data定义为PagesuccessResponse，里面的records为泛型数组，然后便可以具体情况具体定义了： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/576e2714c3004e1e875a22f891a7a9e5~tplv-k3u1fbpfcp-zoom-1.image#?w=1142\&h=487\&s=45833\&e=png\&b=fefefe) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e1738cf4a8f4d76865492578d5c3fad~tplv-k3u1fbpfcp-zoom-1.image#?w=855\&h=287\&s=26486\&e=png\&b=1e1e1e) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c85ccb158b474914b136458420b975d8~tplv-k3u1fbpfcp-zoom-1.image#?w=497\&h=332\&s=30216\&e=png\&b=1e1e1e) ![c08637392ca203aed158eb0deac989f.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74f0017f6ce445b696f3ba659f6e9b5a~tplv-k3u1fbpfcp-watermark.image#?w=463\&h=243\&s=16573\&e=jpg\&b=1f1e1e) ## 9、关于企业项目的自动化部署流程使用GitLab的Webhook功能来监听代码库中的变化，并自动触发部署流程。具体实现步骤如下： 1、在GitLab项目设置中的Webhooks选项中添加一个新的Webhook。将Webhook的URL地址指定为部署服务器上的一个接收请求的脚本。 2、编写部署服务器上的脚本，在接收到GitLab Webhook的请求时，解析请求中的数据，并根据解析结果触发相应的自动化部署流程。部署流程可以包括测试、构建、部署等多个步骤，可以使用Jenkins或Ansible等自动化部署工具来实现。 3、完成上述步骤后，每当GitLab代码库中发生变化时，部署服务器就会自动接收到Webhook请求并触发自动化部署流程。这样就可以实现自动化部署的目的，提高开发效率和部署质量。 ## 10、git clone仓库项目时遇到权限问题及解决如下图，第一次git clone某仓库时遇到权限问题： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/500924a5255047f2a7b777cc6a6d1fb2~tplv-k3u1fbpfcp-zoom-1.image#?w=1201\&h=166\&s=28453\&e=jpg\&b=0f0f0f) 解决方案：在本地生成git密码，添加到仓库中：要在本地生成Git密钥，请按照以下步骤操作： 1. 打开命令行或终端窗口。 2. 输入以下命令：`ssh-keygen -t rsa -b 4096 -C "your_email@example.com"`。 3. 按Enter键，将使用默认文件名和位置生成密钥。如果您希望使用不同的文件名或位置，请根据需要进行更改。 4. 然后系统会提示您输入一个密码以保护您的密钥。如果您不想添加密码，可以直接按Enter键。 5. 最后，将在指定位置生成两个文件：公钥（id\_rsa.pub）和私钥（id\_rsa）。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7b5a4d7d8da43c8af401bf9ec620d7c~tplv-k3u1fbpfcp-zoom-1.image#?w=878\&h=427\&s=54089\&e=jpg\&b=0d0d0d) 将公钥内容粘贴到里面即可： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21a5374fff3c4cd8bbcede5bcab9222f~tplv-k3u1fbpfcp-zoom-1.image#?w=1783\&h=762\&s=71957\&e=png\&b=fefefe) 此时便能成功git clone项目。 ## 11、关于使用a标签时要注意的点使用a标签时，一般除了设置href属性，还要设置 target="\_blank"，rel="noopener noreferrer"这两个属性。 target="\_blank" 用于在新窗口或者新标签页中打开链接，而不是在当前页面打开链接。 rel="noopener noreferrer" 是一个安全属性，主要用于保护用户隐私安全。其中 noreferrer 指示浏览器在导航到目标资源时不要发送 Referer header（即告知目标站点来自哪个网站的信息），从而保护了用户浏览器的信息不被泄露。而 noopener 指示浏览器在接下来的新页面中取消对原页面的引用，防止被恶意页面通过 window\.opener 访问到原页面中的权限，从而防止跨窗口脚本攻击。这两个属性的组合使用可以有效预防一些潜在安全问题，建议在开发过程中养成使用的习惯。 ## 12、关于px与rem之间的自动转化(使用postcss-pxtorem) 安装依赖： ```bash pnpm install postcss-pxtorem ``` 新建 postcss.config.js文件： ```js export default { plugins: { 'postcss-pxtorem': { // 基准屏幕宽度 rootValue: 192, // rem的小数点后位数 unitPrecision: 2, propList: ['*'], exclude: function (file) { // console.log('postcss-pxtorem', file) // if (file.indexOf('node_modules') > -1 || file.indexOf('cms.module') > -1) { // console.log('postcss-pxtorem', file) // } return file.indexOf('node_modules') > -1; }, }, }, }; ``` 在根节点文件中引入： ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from '@/App'; import '@/assets/global.less'; const onResize = () => { let width = document.documentElement.clientWidth; if (width > 1920) { width = 1920; } document.documentElement.style.fontSize = width / 10 + 'px'; }; // 初始化时，即页面挂载前就要执行一次，防止页面第一次加载时产生抖动 onResize(); window.addEventListener('resize', onResize); ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( , ); ``` 在App.tsx中： ```tsx import HomePage from '@/pages/homePage'; import styles from './app.module.less'; function App() { return (

); } export default App; ``` 在src\app.module.less中： ```less .content { margin: 0 auto; max-width: 1920px; } ``` 分出的每个组件的最外层的container的： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c48b117e55c64c9d9b9e2cda9077d394~tplv-k3u1fbpfcp-zoom-1.image#?w=462\&h=328\&s=23184\&e=png\&b=1e1e1e) 此后，便可以直接写设计稿的px单位大小，最大宽度设置为1920px，若超过这个宽度会居中，若小于这个宽度会缩小。 postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为 rem 单位，从而实现响应式布局。该插件的原理是通过**遍历 CSS 样式文件**中的每个规则，在其中检测并转换出现的像素单位，并根据约定的转换比例将其转换为 rem 单位。通常情况下，该插件会将视口宽度作为参考，以便在不同设备上获得一致的 UI 显示效果。例如，在默认设置下，当 CSS 中出现 font-size: 16px; 的样式规则时，该插件将自动将其转换为 font-size: 1rem;，根据默认的转换比例（1px = 1/16rem）计算而得。这样可以确保在不同屏幕尺寸和分辨率下，UI 元素的大小和间距能够自适应地调整，提高网站或应用的可访问性和用户体验。 ## 13、关于调试修改antd design组件样式的技巧我们使用到antd design组件时，需要改变默认样式，如果我们想改变某个组件的样式，则首先需要找到某个组件标签的类名，一般在控制台通过鼠标选择查找到，对于一些需要触发才能显示的元素，有两种情况：hover触发或者组件本身有类似open：true/false（类似Dropdown组件，展开或收起通过open这个属性触发） ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f15d47c763a04ba4b17304f076deb65f~tplv-k3u1fbpfcp-zoom-1.image#?w=341\&h=336\&s=15469\&e=png\&b=1e1e1e)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a663019254f454c96d1457a491e5435~tplv-k3u1fbpfcp-zoom-1.image#?w=732\&h=107\&s=12431\&e=png\&b=fbfafa) 此时若想全局改变，则需要在样式文件里面属下类似下面的代码即可： ```less :global { .ant-dropdown .ant-dropdown-menu { box-shadow: 0px 7.41667px 22.25px rgba(54, 88, 255, 0.15); border-radius: 14.8333px; padding: 20px 10px 20px 10px; display: flex; flex-direction: column; justify-content: center; } } ``` 此时若想只改变某个地方的该组件，则需要给该组件加上rootClassName，再去改变样式： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d48ee9fd370438e9b67f88fdca82c2c~tplv-k3u1fbpfcp-zoom-1.image#?w=398\&h=355\&s=19755\&e=png\&b=1e1e1e) 此时可以看到标签已经被挂载了类名：（rootClassName+生成的哈希（用于样式隔离，原理类似vue的scoped方法） ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/049cb98b32e94d1195ab75e1d04c7df5~tplv-k3u1fbpfcp-zoom-1.image#?w=915\&h=82\&s=14480\&e=png\&b=f8f7f7) 此时再去修改样式即可： ```less .dropdown { :global { .ant-dropdown-menu { box-shadow: 0px 7.41667px 22.25px rgba(54, 88, 255, 0.15); border-radius: 14.8333px; padding: 20px 10px 20px 10px; display: flex; flex-direction: column; justify-content: center; li { padding: 4.8px 36px 4.8px 36px !important; } } } } ``` ## 14、关于根据设计稿制作网页时的屏幕适配、缩放操作适配问题 ### 14-1 不要使用设计稿的决定定位我们还原设计稿时，对于分出的每个组件的最外层的container，我们不要去给它设置固定高度和宽度，设置max-width即可 width: 100%; max-width: 1920px; ，其余由子元素撑开即可： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d06675b9f964ce4b45aeff1f7833c78~tplv-k3u1fbpfcp-zoom-1.image#?w=462\&h=328\&s=23184\&e=png\&b=1e1e1e) 设置container里面的子元素时，记得不要用设计稿的绝对定位，因为那个是基于整个网页决定定位的，可能造成页面布局崩溃，在container里面以container为父盒子平铺即可。 ### 14-2 关于莫名其妙的滚动条（涉及元素的默认宽度）如果没有设置宽度，元素的默认宽度是100%。这意味着元素会填充其父元素的整个宽度。 **（** 一些元素（如`