element-plus 提示找不到名称“ElMessage”。ts(2304)

迷小圈

已于 2022-11-03 13:44:01 修改

阅读量6.4k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： vue element-plus 文章标签： vue.js

于 2022-11-01 15:01:19 首次发布

本文链接：https://blog.youkuaiyun.com/wang13679201813/article/details/127633485

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

element-plus

1 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成Element Plus UI库，并解决在VSCode中使用TypeScript时遇到的ElMessage组件未找到的问题。包括安装步骤、main.ts配置、vite.config.ts设置以及tsconfig.json的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1、安装element-plus

npm install element-plus --save

2、main.ts 引入ElMessage

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3、vite.config.ts 中配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

4、在vscode中使用会报错[找不到名称“ElMessage”。ts(2304)]

解决办法：在 tsconfig.json 中 include 引入 auto-imports.d.ts 这个element-plus 自动引入组件的ts文件，即可解决此TS报错

"include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts"
  ],
"exclude": [ "node_modules"],

注意：exclude的配置代表不需要被编译的文件，由于之前配置为/**/d.ts才导致的ElMessage名称找不到的问题