相信关于按需引入大家应该都会了,不论是官网还是百度一大堆教程
我这边也是参照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的问题的更多相关文章

  1. vue按需引入element或mint

    vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component

  2. vue按需引入/全局引入echarts

    npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...

  3. 不再手写import - VSCode自动引入Vue组件和Js模块

    :first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...

  4. Vue按需加载提升用户体验

    Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

  5. require.context 自动引入指定目录下的文件、组件、reducer

    1. 语法:let  webpacks = require.context (directory,useSubdirectories,regExp)  (directory:"文件路径&qu ...

  6. maven 间接依赖的jar自动引入

    很多时候,我们引用的第三方jar需要一些其他的第三方jar,这个时候默认情况下,间接需要依赖的第三方jar是不会自动被引入的,如果希望这些额外的三方jar被自动引入,则在Maven仓库中除了提交jar ...

  7. eclipse 包 取消代码第一行package包名 自动补全时取消自动引入包名 修改名字 取消引用 自动导入publilc static void main(String[] args) {}

    --项目 --包 包是为了管理类文件,同个包下不允许同名类文件,但不同包就可以,把类放在包里是规范 (https://zhidao.baidu.com/question/239471930532952 ...

  8. idea没有代码自动提示功能和包自动引入不了问题

    idea没有代码自动提示功能和包自动引入不了问题 原因:节电模式 File -> Power Save Mode (被勾选了) 处理方法: File -> Power Save Mode ...

  9. _MyBatis3-topic06.07.08.09_ 全局配置文件_引入dtd约束(xml提示)/ 引入properties引用/ 配置驼峰命名自动匹配 /typeAliases起别名.批量起别名

    MyBatis3 的全局配置文件 : Setting -官方文档 笔记要点 出错分析 [Intellij idea配置外部DTD文件] 设置步骤: (同Eclipse中的Catalog设置 ) Fil ...

  10. vue按需引入echarts

    下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...

随机推荐

  1. spark读取hive表,org.apache.spark.sql.AnalysisException: Unsupported data source type for direct query on files: hive;

    异常出现:spark读取hive表时,spark.read.table(hive.test) hdp版本的spark默认的catalog是spark,配置项 metastore.catalog.def ...

  2. 【题解】CatOJ C0458C 滑动窗口定期重构

    标题 trick 的名字我也不知道是什么,就这样吧. 首先有显然的 dp 式子:\(f(i)=\min \{f(j) \times \max\{a_{j+1},\dots,a_i\}\}\).考虑怎么 ...

  3. 全志科技T3国产工业评估板规格书(四核ARM Cortex-A7,主频1.2GHz)

    1 评估板简介 创龙科技TLT3-EVM是一款基于全志科技T3处理器设计的4核ARM Cortex-A7高性能低功耗国产评估板,每核主频高达1.2GHz,由核心板和评估底板组成. 评估板接口资源丰富, ...

  4. 全志科技T3国产工业核心板规格书(四核ARM Cortex-A7,主频1.2GHz)

    1 核心板简介 创龙科技SOM-TLT3是一款基于全志科技T3处理器设计的4核ARM Cortex-A7国产工业核心板,每核主频高达1.2GHz. 核心板通过邮票孔连接方式引出CSI.TVIN.MIP ...

  5. 开源一个常用的树目录和下拉树js组件

    我写的一个常用的树目录组件,需要jquery和font-awesome支持,对于想使用自定义图标的可以重定义 fa样式即可,或者直接更换源码的样式名称. 下载地址:https://github.com ...

  6. TLScanary:Pwn中的利器

    TLScanary:Pwn中的利器 引言:什么是TLScanary?   在二进制漏洞利用(Pwn)领域,攻击者面临着层层防护措施的挑战.在安全竞赛(如CTF)和实际漏洞利用中,TLS(线程本地存储) ...

  7. 疑难杂症(已解决) | 为什么出现python中tkinter创建界面需要一闪而过才进入主窗口?

    一.具体问题 如图所示,我编写了一个主窗口的程序(如下所示,有兴趣的可以自己复制后运行),发现需要先进入第一个窗口再进入主界面,这不符合逻辑. 代码区域(完整代码): from tkinter imp ...

  8. [oeasy]python0099_雅达利大崩溃_IBM的开放架构_兼容机_oem

    雅达利大崩溃 回忆上次内容 个人计算机浪潮已经来临 苹果公司迅速发展 微软公司脱离mits准备做纯软件公司 IBM用大型机思路制作的5100惨败 Commodore 64 既做计算机 又做游戏机 计算 ...

  9. oeasy教您玩转linux010204-figlet

    我们来回顾一下 上一部分我们都讲了什么? 用 apt 查询并下载了 linuxlogo 用字符画出了 linux 发行版的 logo 还查了手册,通过改参数控制输出信息 我们还能玩点什么呢? 这个实验 ...

  10. JavaScript 探究[] == ![]结果为true,而 {} == !{}却为false

    console.log( [] == ![] ) // true console.log( {} == !{} ) // false 在比较字符串.数值和布尔值的相等性时,问题还比较简单.但在涉及到对 ...