前言

• 在开发项目的时候，如果想要使用一个组件，首先做的第一件事就是导入注册组件，在项目中，需要使用到的组件是非常多的，这里就有一下几种方式了：
  • 将组件库进行全部的导入；
    • 优点：
      • 我们直接使用即可，不需要进行单独的导入和注册操作；
    • 缺点：
      • 会增大项目的打包体积，后续部署在服务器上的时候，会加载一些无用的资源，拖慢页面渲染速度；
  • 按需导入；
    • 优点：
      • 优化项目打包体积；
    • 缺点：
      • 使用组件的时候必须先导入注册，不然会报错；
  • 在需要使用的文件中进行导入；
  • 装插件配置自动注册；
    • 优点：
      • 我们直接使用即可，插件会帮助我们进行导入；
      • 优化项目打包体积
    • 缺点：
      • 需要先安装配置插件，平解决插件带来的问题；
      • 本文就主要是解决自动注册插件带来的问题的；
• 因为这是Vue3 组合式API的项目，所以我们只需导入组件即可，无需注册；

一、安装插件

二、配置插件

• 配置参考文档unplugin-vue-components配置参考文档
• 下面就来说配置步骤：
• 目标文件：
  • vite.config.ts；

1. 导入该插件和Vant解析器：
   • 
2. 配置插件：
   • 
   • 组件的解析器基本都是 组件库名称Resolver()；
   • 组件库的解析器；
     • 大家进去之后，找到对应的组件库名称，点进去，看最后一个导出的函数名就是解析器；
     • 
3. 验证：
   • 现在大家可以去App.vue中进行验证，直接使用对应组件库的组件，能看到效果不报错就OK了（别急还没完）；

三、优化处理

3.1 样式文件重复问题

• 大家验证完成之后，可以F12或右键检查打开控制台，找到Vant的组件，看下面的样式，大家会发现，同样的样式使用了两次；
  • 上下的样式一摸一样；
  • 
• 问题出现的原因：
  • 自动注册组件在自动导入组件的时候，也会自动导入组件的样式；
  • 我们之前在main.ts中已经导入了Vant组件的样式；
  • 所以就会出现样式重复的问题；
• 解决办法：
  • 目标文件：
    • vite.config.ts；
  • 给Vant解析器增加配置项（其他组件一样的道理）；
  • 让其在自动导入组件的时候不导入组件的样式即可（该属性的默认值是true）；
  • 
• 验证：
  • 大家可以去选中刚刚的组件，看看样式还有没有重复的问题；

3.2 类型声明文件重复

• 大家可以去看在整个项目的文件目录，会发现多了一个名为components.d.ts的文件，该文件是刚才的插件自动生成的（就算你把它删掉，增加新的组件保存之后就会重新生成该文件），也是对Vant组件做类型声明的：
  • 
• Vant组件有类型声明，所以该文件显得有点多余了，怎么样去掉该文件呢，还是需要对插件进行配置😂😂；
• 配置插件：
  • dts该属性的默认值为true，会自动生成类型文件；
  • 
• 验证：
  • 新增加一个组件，保存之后看看还有没有该文件；

3.3 给自动注册的组件添加类型

四、总结