浅谈前端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下的对应组件删除,然后重新编译即可。

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

相关推荐
小兵张健1 天前
AI 页面与交互迁移流程参考
前端·ai编程·mcp
小兵张健1 天前
掘金发布 SOP(Codex + Playwright MCP + Edge)
前端·mcp
小兵张健1 天前
Mac 上 Antigravity 无法调用 browser_subagent?一次 400 报错排查记录
前端
张拭心1 天前
编程最强的模型,竟然变成了国产的它
前端·ai编程
爱勇宝1 天前
2026一人公司生存指南:用AI大模型,90天跑出你的第一条现金流
前端·后端·架构
fe小陈1 天前
简单高效的状态管理方案:Hox + ahooks
前端
我叫黑大帅1 天前
Vue3和Uniapp的爱恨情仇:小白也能懂的跨端秘籍
前端·javascript·vue.js
Panzer_Jack1 天前
如何用 WebGL 去实现一个选取色彩背景图片透明化小工具 - Pick Alpha
前端·webgl
None3211 天前
【NestJs】使用Winston+ELK分布式链路追踪日志采集
javascript·node.js
GIS之路1 天前
ArcGIS Pro 中的 Python 入门
前端