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

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

相关推荐
weixin199701080165 分钟前
《识货商品详情页前端性能优化实战》
前端·性能优化
Forever7_6 分钟前
重磅!Vue3 手势工具正式发布!免费使用!
前端·前端框架·前端工程化
用户806138166597 分钟前
发布为一个 npm 包
前端·javascript
树上有只程序猿38 分钟前
低代码何时能出个“秦始皇”一统天下?我是真学不动啦!
前端·后端·低代码
TT_哲哲38 分钟前
小程序双模式(文件 / 照片)上传组件封装与解析
前端·javascript
菜果果儿1 小时前
Vue 3 + TypeScript 常用代码示例总结
前端
前端付豪1 小时前
实现多角色模式切换
前端·架构
从文处安1 小时前
「九九八十一难」从回调地狱到异步秩序:深入理解 JavaScript Promise
前端·javascript
要换昵称了1 小时前
Axios二次封装及API 调用框架
前端·vue.js
进击的尘埃1 小时前
Node.js 子进程管理:child_process 模块的正确打开方式
javascript