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