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

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

相关推荐
程序员Agions14 小时前
Flutter 邪修秘籍:那些官方文档不会告诉你的骚操作
前端·flutter
白驹过隙不负青春14 小时前
Docker-compose部署java服务及前端服务
java·运维·前端·docker·容器·centos
满天星辰14 小时前
Vue.js的优点
前端·vue.js
哒哒哒52852014 小时前
React createContext 跨组件共享数据实战指南
前端
怪可爱的地球人14 小时前
UnoCss最新配置攻略
前端
Carry34514 小时前
Nexus respository 搭建前端 npm 私服
前端·docker
满天星辰14 小时前
使用 onCleanup处理异步副作用
前端·vue.js
POLITE314 小时前
Leetcode 142.环形链表 II JavaScript (Day 10)
javascript·leetcode·链表
qq_2290580114 小时前
lable_studio前端页面逻辑
前端
黎明初时14 小时前
React基础框架搭建8-axios封装与未封装,实现 API 请求管理:react+router+redux+axios+Tailwind+webpack
javascript·react.js·webpack