关于vue按需引入ElMessage和ElMessageBox未被自动引入到auto-important的问题

相信关于按需引入大家应该都会了,不论是官网还是百度一大堆教程
我这边也是参照https://github.com/youlaitech/vue3-element-admin的写法去写的-----需要的可以去看看

这里复述一遍,作为笔记:
首先安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
yarn add -D unplugin-vue-components unplugin-auto-import

 做完这些操作后查看auto-imports.d.ts

没有自动导入messagebox提示弹窗

 一开始我都不知道这回事,后面在ts里面调用messagebox的时候发现还要引入,我寻思不是按需引入么,怎么还要引入,于是发生了刚刚一系列事件

网上找到这么一篇文章

vite + vue + ts 自动按需导入 Element Plus组件,并如何解决按需引入后ElMessage与ElLoading 的问题(找不到名称“ElMessage”问题。)

文章写的很好,也有解决方案,不过我比较轴,我非不这么干

最终,终于让我找到问题所在,

答案:按需引入的原理是监听vue页面,ts页面先行使用的话不会被监听到,只有vue页面使用了,后面再刷新按需引入,则auto-import才会更新内容

发现原因:在创建项目初期,搭框架的时候,谁去在vue里面写弹窗啊,弹窗一般只有做提示信息的时候才能用到,也就是ts文件,而我一般会先把框架搭完才会写页面,像pinia,router,axios拦截器,svg,多语言之类的先搞完,正好写到拦截器,需要弹窗,于是发现了这个问题,并记录下来。

可能会出现的情况:有时候删除d.ts重新生成messageBox会丢失,不用着急,等一段时间就好了,这个时间有点长。

警醒后面的学习者;

想看看有多少遇到这个问题的兄弟,遇到了的话,点个收藏,我看看有多少轴子在我这里的到了解脱0.0

最后放张我解决后的截图

 

posted @ 2023-07-13 15:59  吃不棒的胖胖糖  阅读(1315)  评论(2编辑  收藏  举报