【已解决】引用官网的 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>