关于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
最后放张我解决后的截图

关于vue按需引入ElMessage和ElMessageBox未被自动引入到auto-important的问题的更多相关文章
- vue按需引入element或mint
vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component
- vue按需引入/全局引入echarts
npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...
- 不再手写import - VSCode自动引入Vue组件和Js模块
:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...
- Vue按需加载提升用户体验
Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...
- require.context 自动引入指定目录下的文件、组件、reducer
1. 语法:let webpacks = require.context (directory,useSubdirectories,regExp) (directory:"文件路径&qu ...
- maven 间接依赖的jar自动引入
很多时候,我们引用的第三方jar需要一些其他的第三方jar,这个时候默认情况下,间接需要依赖的第三方jar是不会自动被引入的,如果希望这些额外的三方jar被自动引入,则在Maven仓库中除了提交jar ...
- eclipse 包 取消代码第一行package包名 自动补全时取消自动引入包名 修改名字 取消引用 自动导入publilc static void main(String[] args) {}
--项目 --包 包是为了管理类文件,同个包下不允许同名类文件,但不同包就可以,把类放在包里是规范 (https://zhidao.baidu.com/question/239471930532952 ...
- idea没有代码自动提示功能和包自动引入不了问题
idea没有代码自动提示功能和包自动引入不了问题 原因:节电模式 File -> Power Save Mode (被勾选了) 处理方法: File -> Power Save Mode ...
- _MyBatis3-topic06.07.08.09_ 全局配置文件_引入dtd约束(xml提示)/ 引入properties引用/ 配置驼峰命名自动匹配 /typeAliases起别名.批量起别名
MyBatis3 的全局配置文件 : Setting -官方文档 笔记要点 出错分析 [Intellij idea配置外部DTD文件] 设置步骤: (同Eclipse中的Catalog设置 ) Fil ...
- vue按需引入echarts
下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...
随机推荐
- WPF/C#:在DataGrid中显示选择框
前言 在使用WPF的过程中可能会经常遇到在DataGrid的最前或者最后添加一列选择框的需求,今天跟大家分享一下,在自己的项目中是如何实现的. 整体实现效果如下: 如果对此感兴趣,可以接下来看具体实现 ...
- 【原创】EtherCAT主站IgH解析(二)-- Linux/Windows/RTOS等多操作系统IgH EtherCAT主站移植指南
版权声明:本文为本文为博主原创文章,转载请注明出处.如有问题,欢迎指正.博客地址:https://www.cnblogs.com/wsg1100/ 前言 目前,EtherCAT商用主站有:Aconti ...
- 用pm2命令管理你的node项目
文章目录 前言 安装 运行项目 pm2的命令 前言 我在服务器上运行node项目,使用命令nohup npm start &,结果关闭终端之后,进程就会停止,看来nohup也不是万能的后台运行 ...
- 08-Python迭代器与生成器
迭代器 什么是迭代器 迭代是Python最强大的功能之一,是访问序列中元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器 ...
- 19-Docker数据持久化
什么是Docker数据持久化 容器在运行时会在镜像层上加上一层:可写层. 当删除容器时,可写层就会一起被删除,数据丢失. 数据持久化就是就是将数据持久化保存,删除容器之后,数据仍然存在. 方法1-挂载 ...
- TCP,UDP,IP,数据链路层头部详解
UDP头部 可以看到UDP头部由(源端口).(目的端口).(长度)跟(校验和)组成,总共8字节. 源端口:发送方的端口号,16位,即2字节. 目的端口:接收方的端口号,16位,即2字节. 长度:头部+ ...
- Openstack制作Rhel9,使用IOS镜像制作
转自作者自己的CSDN 拷贝 ==================== 需要已有环境: 1.Openstack 2.qume-img,kvm,virsh.... (yum install qemu- ...
- 使用中台 Admin.Core 实现了一个Razor模板的通用代码生成器
前言 前面使用 Admin.Core 的代码生成器生成了通用代码生成器的基础模块 分组,模板,项目,项目模型,项目字段的基础功能,本篇继续完善,实现最核心的模板生成功能,并提供生成预览及代码文件压缩下 ...
- elementplus弹窗可拖拽draggable,点击空白处不消失close-on-click-modal,modal是否去掉遮罩层
<el-dialog :modal="false" v-model="dialogVisible" title="" width=&q ...
- [oeasy]python0032_杀死进程_进程后台运行不输出_nohup_ps_显示进程
查看进程 回忆上次内容 上次先ctrl + z 挂起进程 然后运行 bg 编辑 程序继续跑起来 而且不断输出到标准输出流 甚至连ctrl + c 都无法结束进程了 这可怎么办呢? 只能新开一个 ...