背景:在使用Element Plus写demo时,导入ElMessage组件出现 【模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?】的错误提示

环境:Vue3 + Vite + Ts + Element Plus

定位:问题出在ts的语法检查,import { ElMessage } from 'element-plus'; 时在框架里找不到ElMessage这个对象。

  在之前的demo中,ElMessage基本都是可用的,参照Element Plus官方文档的示例使用即可,现在突然不能用了,检查了一下语法,没有变化,都是import { ElMessage } from 'element-plus'; 于是想到版本问题,可能是因为用的最新的包,所以有些类型识别不出,导致出现错误提示,由于老项目是没问题的,所以对比老项目,把Element Plus包的版本还原到 2.2.30,重新install, enmmmm 问题依然存在。

  语法OK,版本OK,那么这里排除Element Plus框架的问题了,继而把焦点放到Ts,这种识别不到类型的问题,大部分和Ts有关,为了排查框架问题所以优先检查的Element Plus。

  同样的做法,还原一下Ts的包版本,重新install,嗯,没用,波浪线依然存在,那就和包没关系了。既然识别不到ElMessage这个类型,那么就自然而然的想到类型声明了!

  So,在import { ElMessage } from 'element-plus'; 下面手动加入声明的代码,如下:

import { ElMessage } from 'element-plus';
// 手动声明 ElMessage
declare module 'element-plus' {
export class ElMessage {
static success(message: string): void;
static warning(message: string): void;
static info(message: string): void;
static error(message: string): void;
}
}
ElMessage.success("提示")

  这样就没问题了,错误提示解决了,因为我手动声明了类型。考虑到很多个页面都会存在该问题,索性将类型声明加入到声明文件中。

  So,在vite-env.d.ts这个声明文件中做如下配置:

  配置完之后,所有的.vue页面使用ElMessage时都OK。

  But,mian.ts里面出现错误提示了,因为在mian里面我导入了 Element Plus,而我单独声明了element-plus这个包,里面肯定不止ElMessage,所以use的时候报错了。

  当然了,这个错误提示其实并不影响我们的功能,项目是可以跑起来的。但是作为一个精致的老开发(极简风格和强迫症深度患者),是不允许项目存在波浪线的。

  最后摸到Ts的配置文件,tsconfig.json,这个配置需要对Ts有一定基础,经过对Ts配置的一番研读,最后成功定位到解决方案了,在这个配置文件中加上:

"esModuleInterop": true

  esModuleInterop指定是否启用 ES 模块导入语法的转换,默认为 false。开启后可以在使用第三方库时更方便地使用 ES 模块导入语法。

  至此,问题解决!

  省流,总结一下:

    1、先说复现,使用Vite构建一个Vue3+Ts项目,安装Element Plus,在页面的script里导入ElMessage就能复现这个问题

    2、错误提示不影响本地启动以及使用,只是导入的地方有波浪线提示

    3、可在单个页面上通过手动声明解决该问题;在声明文件中使用则会和全局导入冲突,因为声明的类型不全,所以存在错误提示

    4、esModuleInterop设置为True即可解决,这个属性默认为false也能理解,毕竟跟第三方库有关,有的项目也不一定用第三方库,就是对小白不太友好

  PS:一时间没有在网上找到这个问题的分析,因此这里记录一下,方便自己以后查阅,把错误提示作为标题,也方便以后其他人遇到该问题时可以马上搜到此文章。

  以上。

 

模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?的更多相关文章

  1. ES6学习笔记十:模块的导入、导出

    一:模块导入 1) import { 要导入的属性.方法民 } from '模块路径'; 2)该种方法需要有配置文件,指明模块所在路径 import { 要导入的属性.方法民 } from '模块名' ...

  2. element ui table 导出excel表格

    https://blog.csdn.net/u010427666/article/details/79208145 vue2.0 + element UI 中 el-table 数据导出Excel1. ...

  3. vue+element 使用Export2Excel导出表格组件

    下载表格组件是根据我自己的业务需求来封装的 使用的是vue中 xlsx 的插件,需要安装新的依赖及配置 仅供参考 不保证和你百分百匹配 安装依赖 npm install -S file-saver x ...

  4. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  5. 手把手教Linux驱动2-之模块参数和符号导出

    通过<手把手教Linux驱动1-模块化编程,玩转module>的学习,我们已经掌握了如何向内核加载一个模块,现在我们学习模块之间如何传递参数. 一.给模块传递参数 当我们加载一个模块到Li ...

  6. Vue+element 实现文件导出xlsx格式

    傻瓜教程:   第一步:安装两个依赖包 npm install --save xlsx file-saver 第二步:建立一个Vue文件,导入以下代码即可 <template> <d ...

  7. vue+element UI如何导出excel表

    导出excel表应按如下规则 首先要先安装如下依赖 npm install --save xlsx npm install --save file-saver 接下在在你的代码中去引用这两个 impo ...

  8. vue2.5 + element UI el-table 导出Excel

    安装依赖 npm install --save xlsx file-saver 新建excelHelper.js \src\utils\目录下新建excelHelper.js文件 import Vue ...

  9. 使用Arduino和SD卡模块记录数据并导出到Excel

    在本篇文章中,我们将学习如何基于Arduino开发板使用一个SD卡模块.同时结合DS3231实时时钟模块,我们将制作一个数据记录仪的示例,在示例中,我们将温度传感器的数据存储到SD卡中,并将这些数据导 ...

  10. vue3+element表格数据导出

    实现效果 导出后的效果: 步骤 第一步:安装依赖 npm install --save xlsx file-saver 第二步:给表格添加id,导出的时候需要用到 <!-- 导出按钮 --> ...

随机推荐

  1. 无法将类 org.example.sh.utils.PageInfo<T>中的构造器 PageInfo应用到给定类型;

    是因为没有在工具类中加入构造器, @Data @NoArgsConstructor @AllArgsConstructor @ToString

  2. CVE-2016-2183(SSL/TLS)漏洞的办法

    运行gpedit.msc,打开"本地组策略编辑器" 启用"SSL密码套件顺序" TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256_ ...

  3. (原创)【B4A】一步一步入门07:EditText,文本框、密码框、键盘样式、提示文本(控件篇03)

    一.前言 本篇教程,我们来讲一下常用的控件:EditText(文本输入框). 本篇教程将会讲解文本框的基本使用,如:提示文本.密码文本.键盘样式等. 相信看完的你,一定会有所收获! 本文地址:http ...

  4. UI界面实现SSH登录服务器并执行命令监控

    一.通过paramiko实现SSH远程登录服务器.执行命令并返回信息: 二.通过wxpython实现UI化: 三.代码实现如下: 1)主程序MainUI #coding:utf8 #!/usr/bin ...

  5. MySQL 主从复制的问题及解决方案

    更多内容,前往 IT-BLOG 复制功能是构建 MySQL 的大规模.高性能的基础,也就是所谓的 "水平扩展" 架构.我们可以通过为服务器配置一个或多个备库.同时,复制也是高可用性 ...

  6. Treemap按key和value降序排序

    Treemap是一种根据键排序的数据结构,可以通过重载它的比较器来按照值排序.要按键排序,可以使用默认的比较器,而要按值排序,可以创建一个自定义的比较器并将其传递给treemap的构造函数. 以下是按 ...

  7. Windows系统下载最新版Windows10 iso映像

    在电脑PC端如何下载最新版的完整Windows10 iso映像?打开https://www.microsoft.com/zh-cn/software-download/windows10/页面,是不能 ...

  8. Mac 音频转换器推荐 DRmare Audio Converter、Audi Free Auditor

    给大家推荐两款 Mac 上的音频转换器,这两款转换器都可以转换苹果音乐,iTunes歌曲或者一些常规的音轨到MP3, FLAC, WAV, M4A, AAC格式等等,转换后我们就可以在所有的设备和播放 ...

  9. 一些随笔 No.1

    耦合 耦合是一个设计与逻辑上的问题 例如一个软件有20个功能,删除任意一个功能对别的19个功能不造成影响,就是低耦合 如果删除一个功能后其他功能会失去完整性,那么就是高耦合 Difference be ...

  10. list Api

    类型 名称 void add(String item)将指定的项目添加到滚动列表的末尾. void add(String item, int index)将指定的项目添加到由索引指示的位置的滚动列表中 ...