前端技术小结

git

npm下载时经常版本冲突，git指令：

npm install --legacy-peer-deps   

img 的src动态绑定问题

构建工具的资源处理机制
Webpack/Vite的静态分析：打包工具（如Webpack或Vite）在构建阶段会扫描代码中的静态资源引用（如import或require）。这些引用会被处理成最终部署路径（如添加哈希、压缩文件名等）。

动态绑定的字符串路径：如果路径是通过字符串动态绑定的（如:src=“imgPath”，且imgPath是一个字符串），打包工具无法在构建阶段确定该路径对应的具体文件，因此不会处理这些资源，导致路径未被替换为正确的输出路径。

<img :src="require(`@/assets/path/to/your/image.jpg`)" alt="Image" />

渐变边框设置

前端页面很多次遇到了渐变边框的设置。border-color并不能设置渐变色。
解决方法：

       &::before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          right: -1px;
          bottom: -1px;
          background: linear-gradient(180deg, #EDF3FF 0%, #CEDEFF 100%);
          border-radius: 30px;
          z-index: -1;
          padding: 1px;
          /* 边框宽度 */
          -webkit-mask:
            linear-gradient(#fff 0 100%) content-box,
            linear-gradient(#fff 0 100%);
          -webkit-mask-composite: xor;
        }

content: ‘’;：这是一个空的内容，用来生成伪元素。必须定义，才能使 ::before 起作用。
position: absolute;：将伪元素定位在父元素的绝对位置上。
left, top, right, bottom：通过设置这些属性来确保伪元素覆盖父元素的边界，并且稍微超出 1px，以创建一个外层的 “边框” 效果。
background: linear-gradient(180deg, #EDF3FF 0%, #CEDEFF 100%);：设置渐变背景，使伪元素有一个从浅蓝到深蓝的垂直渐变效果。
border-radius: 30px;：给伪元素添加圆角，使其具有圆润的边框效果。
z-index: -1;：确保伪元素位于实际元素的后面，不会遮盖实际的内容。
padding: 1px;：为伪元素添加内边距，使得背景渐变稍微缩进，给它一个边框的感觉。
-webkit-mask 和 -webkit-mask-composite：这些是用来创造特殊的遮罩效果，确保背景不会覆盖边框部分。
xor 运算的行为是：如果两个遮罩区域的透明度存在交集区域，则该交集区域会被遮罩去除；而没有交集的部分会被保留下来。也就是说，只有两个遮罩区域的非重叠部分会被展示。