前端开发小技巧 - 【Vant4 + Vue3 + TS】 - 自动注册组件【配置自动注册插件 + 解决插件带来的问题（样式重复 + 类型声明文件重复）】

前言

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

一、安装插件

• 安装命令 ：

  pnpm add unplugin-vue-components -D

• 其他组件的自动注册也可以下载该插件；

• 大家也可以使用别的包管理工具去进行下载；

  • 其他包管理工具的下载命令：NodeJS、nvm、npm、yarn、pnpm 的 安装 和 使用；

二、配置插件

• 配置参考文档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，会自动生成类型文件；
  • 
• 验证：
  • 新增加一个组件，保存之后看看还有没有该文件；

四、总结