浅谈前端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 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰1 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝1 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
A黄俊辉A1 天前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
三十而立洋1 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁1 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄1 天前
JavaScript 隐式全局变量解析
javascript
honkun61 天前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs19911 天前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net