Vue3使用Element-plus時(shí)消息彈框ElMessage沒有樣式
問題描述
Element-plus在使用ElMessage消息彈框的時(shí)候沒有樣式，按照官方的按需加載的方式引入的
1、Element-plus使用了自動(dòng)按需導(dǎo)入，vite.config.js配置如下：
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
- 代碼手動(dòng)導(dǎo)入了API，如下
import { ElMessage } from "element-plus";
ElMessage.success('修改成功！')
解決方案
解決沒有樣式的問題
將上述代碼導(dǎo)入import部分的代碼去掉，直接調(diào)用。
// 去掉引用
// import { ElMessage } from 'element-plus'
使用的時(shí)候直接調(diào)用
ElMessage.success('修改成功！')
成功解決！
解決ts報(bào)錯(cuò)的問題
如果是使用了ts的話，會(huì)報(bào)找不到名稱ElMessage這樣的一個(gè)錯(cuò)誤
解決辦法： 在tsconfig.json中的include字段中添加auto-imports.d.ts就可以了,這樣就會(huì)自動(dòng)引入了。文章來源：http://www.zghlxwxcb.cn/news/detail-496558.html
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],
參考文章：
vue3項(xiàng)目，Element-plus ElMessage API 調(diào)用樣式丟失問題
element-plus在vue3中樣式不顯示的問題文章來源地址http://www.zghlxwxcb.cn/news/detail-496558.html
到了這里，關(guān)于【已解決】Vue3使用Element-plus按需加載時(shí)消息彈框ElMessage沒有樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
