前言
- 在开发项目的时候,如果想要使用一个组件,首先做的第一件事就是导入注册组件 ,在项目中,需要使用到的组件是非常多的,这里就有一下几种方式了:
- 将组件库进行全部的导入;
- 优点:
- 我们直接使用即可,不需要进行单独的导入和注册操作;
- 缺点:
- 会增大项目的打包体积,后续部署在服务器上的时候,会加载一些无用的资源,拖慢页面渲染速度;
- 优点:
- 按需导入;
- 优点:
- 优化项目打包体积;
- 缺点:
- 使用组件的时候必须先导入注册,不然会报错;
- 优点:
- 在需要使用的文件中进行导入;
- 装插件配置自动注册;
- 优点:
- 我们直接使用即可,插件会帮助我们进行导入;
- 优化项目打包体积
- 缺点:
- 需要先安装配置插件,平解决插件带来的问题;
- 本文就主要是解决自动注册插件带来的问题的;
- 优点:
- 将组件库进行全部的导入;
- 因为这是
Vue3 组合式API
的项目,所以我们只需导入组件即可,无需注册;
一、安装插件
-
安装命令 :
jspnpm add unplugin-vue-components -D
-
其他组件的自动注册也可以下载该插件;
-
大家也可以使用别的包管理工具去进行下载;
- 其他包管理工具的下载命令:NodeJS、nvm、npm、yarn、pnpm 的 安装 和 使用;
二、配置插件
- 配置参考文档
unplugin-vue-components
配置参考文档 - 下面就来说配置步骤:
- 目标文件 :
vite.config.ts
;
- 导入该插件和Vant解析器 :
- 配置插件 :
- 组件的解析器基本都是
组件库名称Resolver()
; - 组件库的解析器;
- 大家进去之后,找到对应的组件库名称,点进去,看最后一个导出的函数名就是解析器;
- 组件的解析器基本都是
- 验证 :
- 现在大家可以去
App.vue
中进行验证,直接使用对应组件库的组件,能看到效果不报错就OK了(别急还没完);
- 现在大家可以去
三、优化处理
3.1 样式文件重复问题
- 大家验证完成之后,可以
F12
或右键检查打开控制台,找到Vant的组件,看下面的样式,大家会发现,同样的样式使用了两次;- 上下的样式一摸一样;
- 问题出现的原因 :
- 自动注册组件在自动导入组件的时候,也会自动导入组件的样式;
- 我们之前在
main.ts
中已经导入了Vant
组件的样式; - 所以就会出现样式重复的问题;
- 解决办法 :
- 目标文件:
vite.config.ts
;
- 给
Vant
解析器增加配置项(其他组件一样的道理); - 让其在自动导入组件的时候不导入组件的样式即可(该属性的默认值是
true
);
- 目标文件:
- 验证:
- 大家可以去选中刚刚的组件,看看样式还有没有重复的问题;
3.2 类型声明文件重复
- 大家可以去看在整个项目的文件目录,会发现多了一个名为
components.d.ts
的文件,该文件是刚才的插件自动生成的(就算你把它删掉,增加新的组件保存之后就会重新生成该文件),也是对Vant组件做类型声明的: - Vant组件有类型声明,所以该文件显得有点多余了,怎么样去掉该文件呢,还是需要对插件进行配置😂😂;
- 配置插件 :
dts
该属性的默认值为true
,会自动生成类型文件;
- 验证:
- 新增加一个组件,保存之后看看还有没有该文件;