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名称找不到的问题