记录前端遇到的一些问题

前言

最近博主在前端开发中遇到了一些问题，想通过写下这个博客记录一下，方便以后遇到相同问题时查阅或者有更好的解决办法时可以即使记录。

在vue3中引入组件时，vscode爆出has no default export的错误提示。

出现该错误的原因是由于vscode安装的是Vetur插件，该插件是Vue2时代的工具，并且强制export default的写法，对Vue3的兼容适配不够彻底，对于<script setup>语法糖的支持不够好。所以导致出错。

解决办法是将Vetur插件卸载，安装Vue Official插件，该插件是Vue官方出品的，完全支持Vue3

在使用Electron-Vite时，遇到了Unable to load preload script的错误提示。由于预加载脚本没有正确加载，导致涉及渲染进程和主进程通信的功能无法正常使用。

出现该问题的原因是因为electron的沙盒模式（sandbox）。在开启了沙盒环境的情况下，preload脚本无法被加载。通过禁用沙盒模式可以解决该问题。

在主进程做如下配置

mainWindow = new BrowserWindow({
    ....
    webPreferences: {
        ...
        sandbox: false // 禁用沙盒模式
    }
    ....
});

在设计页面时，可能会出现一些预期之外的滚动条，一般有以下原因：

内容过多：当容器内的内容（如文本、图片等）的总高度或总宽度超过容器的可视区域时，滚动条就会出现。
样式设置：通过CSS设置的padding、border或margin可能会增加容器的实际大小，从而触发滚动条的出现。例如，如果给容器设置了内边距（padding），那么容器的实际可视区域会变小，内容更容易超出这个区域。
固定高度/宽度：如果给容器设置了固定的高度（height）或宽度（width），并且内容无法适应这个尺寸，滚动条就会出现。
最小/最大高度/宽度：使用min-height、max-height、min-width或max-width等属性时，如果内容尺寸超出了这些限制，滚动条也可能会出现。
Flexbox或Grid布局：在使用Flexbox或Grid等现代布局系统时，如果子元素的总大小超过了容器的大小，并且没有适当的调整（如通过flex-wrap、overflow等属性），滚动条可能会出现。

解决该问题的方法是：