1.使用了组件/插件自动引入的插件 在package.json中的名称如下：
"devDependencies": {
"unplugin-auto-import": "^0.16.6",
"unplugin-vue-components": "^0.25.2",
}
下载好之后，需要在vite.config.ts进行配置。 （1）auto-imports.d.ts components.d.ts 文件的路径配置 由于由这两个插件生成的 auto-imports.d.ts components.d.ts 这两个类型声明文件默认存在根目录中，因此当我们想要将这两个文件移入到/src下的时候就会出现找不到声明文件的错误，于是我们应该在vite.config.ts重新声明这两个文件的路径。
上图红框中的 dts 属性便是声明路径的属性，你将这两个文件放到了哪里就写上对应的路径即可， ./ 是表示 vite.config.ts 和 src 文件夹为同级目录。
（2）ElementPlus UI的配置 基本配置按照官网的来就行，但如果你想要修改主题，也就是要改动官方的颜色变量，那么，除了照搬官方操作外，还需要在解析器里加上一行配置，如下图红框中所示
不然无法将自定义的变量覆盖掉官方变量。
（3）vue vue-router pinia 大多数时候，我们都会在组件里用到vue vue-router pinia 的函数，每次都导入函数会让人觉得十分麻烦，因此，在自动导入的插件配置里写上 vue vue-router pinia，下次再在组件里使用到这些函数时就可以不用手动导入了。
2.scss的深度穿透 由于我们在使用vue开发的时候使用到了组件，因此绝大多数情况下，我们会在标签中加上 scoped 属性来限制 style 中样式的作用范围，但当我们想要对该页面中某些组件下的元素设置样式时，scoped属性就会对我们的设置造成影响。为了消除scoped带来的影响，我们可以使用样式穿透。 直接看实例：
<el-col :span="6" class="menu"> <icon-svg iconClass="toggle-left" class="menuicon"></icon-svg> </el-col>
`
.menuicon{
box-sizing: border-box;
width: 40px;
height:40px;
padding-bottom: 5px;
font-size: 30px;
line-height: 35px;
color: white;
&:deep(.icon){ margin-bottom: 0px; }
&:hover{ cursor: pointer; } } ` 在最新版的sass中，已经deprecated了::deep的写法，改用了 :deep() 的写法。 具体的书写方式为： 选择器:deep(需要设置样式的选择器)， 在上面的代码中，并没有显示出 .icon 这个类选择器，但并不代表我不能对其样式进行修改，我们可以现在页面结构中找到想要修改的元素所对应的类名，然后将该类名放入 :deep() 的括号里， :deep()前面跟上需要被穿透元素。
3.阿里iconfont库导入的svg图标无法修改颜色 svg相对于unicode的一大好处就是能够修改图标颜色，但有的时候我们明明已经设置了其父辈或者祖辈的字体颜色，但就是无法改变svg的颜色。遇到这个问题的时候，应该查看一下下载js文件里有没有fill这个属性。 打开js文件，用ctrl+F的调出查找框，然后输入fill，看看有没有 fill:#xxx(颜色编号) 的属性，如果有这样的属性就将其删除，但不要删除 fill: currentColor 这个属性，因为这个属性是保证你使用的svg图标能继承父辈或者祖先字体颜色的属性。删除过后，就能自定义颜色了。
