浅谈前端vue的自动导入插件unplugin-vue-components

前端插件真的是层出不穷,从代码压缩,到依赖自动导入,到现在的components自动导入,节省了前端开发者的导入不规范问题,同时也节省了大量的时间,用来编写核心代码。

这次就来简单说一说,前端的自动导入插件

复制代码
unplugin-vue-components

初次相识是在若依开源框架上,当时比较懵的是,明明用那么多components,以及element-ui的组件,但是为什么找不到引入的地方,倒是找到了一堆使用的地方。

如:element组件的使用

自定义组件的使用

用使用了,但是却没有找到引入的地方。真的达到了只见声不见其人的感触!

好了。不开玩笑。既然当前页面找不到引入,那我们就按照总体bug排查思路。

去他的父级别去找。当然父级找不到,我们就再上一层去app中找,如果还是找不到,我们就去构建中查找。。

直到我们在vite的构建文件中找到了一个熟悉的 插件。

它在vite运行的时候,将它挂载上了。

点开这个插件文件。我们就可以看到,它指向了当前一个的./components.ts文件,并且vite插件在初始化的时候传递了当前的路径给他。

再次点开components文件,会发现,这个文件执行是去当前的项目中找到了src文件夹,并且引入的是 unplugin-vue-components/vite 跟 unplugin-vue-components/resolvers

前者负责将当前项目的src路径下的components的组件自动引入,后者负责将我们所用到的所有element-ui组件进行引入。

最后生成一个components.d.ts文件。在这个文件中我们就可以看到,有components下自己创建的组件,也有element中的组件。

因为整体上当我们在执行vite的时候,就已经将这个插件进行引入,所以,目前默认上挂载在全局,我们只需要在使用的时候直接使用即可,不必再去引入当前组件。

如果不想要这个组件,则我们需要将components下的对应组件删除,然后重新编译即可。

日常浅谈到此为止。望同胞们编码顺利。

相关推荐
linweidong27 分钟前
C++ 模块化编程(Modules)在大规模系统中的实践难点?
linux·前端·c++
leobertlan4 小时前
2025年终总结
前端·后端·程序员
子兮曰4 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
Howrun7775 小时前
VSCode烦人的远程交互UI讲解
ide·vue.js·vscode
百锦再5 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君5 小时前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再5 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI5 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端
颜酱6 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
失忆爆表症7 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui