【已解决】引用官网的 Element-Message 消息框居然报错为什么呢？

本文主要是介绍【已解决】引用官网的 Element-Message 消息框居然报错为什么呢？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue 版本： vue3
编程语言：JavaScript

os: macos13
组件：element-plus
问题组件： Message 信息框

问题：想学习使用 element 官网里的组件，我找到了message
消息提示，然后我就把代码复制下来放到创建好的 app.vue中的组件中，结果报一堆错误。吓人这么一堆看都看不懂在这里插入图片描述官网示例代码：

<template><el-button :plain="true" @click="open1">Success</el-button><el-button :plain="true" @click="open2">Warning</el-button><el-button :plain="true" @click="open3">Message</el-button><el-button :plain="true" @click="open4">Error</el-button>
</template><script lang="ts" setup>
import { ElMessage } from 'element-plus'const open1 = () => {ElMessage({message: 'Congrats, this is a success message.',type: 'success',plain: true,})
}
const open2 = () => {ElMessage({message: 'Warning, this is a warning message.',type: 'warning',plain: true,})
}
const open3 = () => {ElMessage({message: 'This is a message.',type: 'info',plain: true,})
}
const open4 = () => {ElMessage({message: 'Oops, this is a error message.',type: 'error',plain: true,})
}
</script>

在这里插入图片描述

解决方案：
其实这是 webpack 编译的错误，因为无法识别ts 文件，全程是 typescript ，我们只需要把 ts 代码改为 js 即可，修改好的代码：

<template><el-button :plain="true" @click="open1">Success</el-button><el-button :plain="true" @click="open2">Warning</el-button><el-button :plain="true" @click="open3">Message</el-button><el-button :plain="true" @click="open4">Error</el-button>
</template><script setup>
import { ElMessage } from 'element-plus'const open1 = () => {ElMessage({message: 'Congrats, this is a success message.',type: 'success',plain: true,})
}
const open2 = () => {ElMessage({message: 'Warning, this is a warning message.',type: 'warning',plain: true,})
}
const open3 = () => {ElMessage({message: 'This is a message.',type: 'info',plain: true,})
}
const open4 = () => {ElMessage({message: 'Oops, this is a error message.',type: 'error',plain: true,})
}
</script>