vue3 Element Plus中icon圖標(biāo)不顯示的解決方案
更新時間：2024年03月19日 14:58:17 作者：Y猿某人
這篇文章主要介紹了vue3 Element Plus中icon圖標(biāo)不顯示的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題描述
在vue組件中使用了Element Plus中icon圖標(biāo)<el-icon>方法想要顯示圖標(biāo)
程序能運行但在瀏覽器中圖標(biāo)無法顯示
解決辦法
根據(jù)Element Plus官方文檔給出的教程以及實踐操作
解決辦法如下：
1.安裝
在終端運行下面指令
npm install --save @element-plus/icons
注意：
- Element Plus官方文檔給出的指令為npm install
- @element-plus/icons-vue，但運行時終端可能會提供更正確的指令，可以都嘗試運行一下看哪個可行
2.在vue文檔中寫入代碼
你想要顯示在哪個vue組件文檔，就在那個文檔寫入如下代碼：
<script >
//首先是導(dǎo)入圖標(biāo)們，要用哪個就導(dǎo)入哪個
//例如Search就是那個放大鏡的圖標(biāo)
import {Search,Edit,Check,Message,Star,Delete,} from "@element-plus/icons";
export default {
//其次是寫入components中
components: {
Search,
Edit,
Check,
Message,
Star,
Delete,
}
};
</script>
3.使用
同時在該vue組件文檔中插入代碼
<el-icon><Search /></el-icon>
4.效果
總結(jié)
顯示成功！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在項目中使用ref時有時候直接取值,有時候返回的卻是一個數(shù)組,不知其中緣由,后查了一下ref用法,在這里給大家分享vue中ref的用法,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細介紹了vue component組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue修改iview組件的樣式的兩種方案(element同)
使用vue必然會用到等iview組件庫,但是iview的組件的樣式跟自己寫的div的樣式修改不太一樣,所以本文給大家介紹了Vue修改iview組件的樣式的兩種方案(element同),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Vue 項目代理設(shè)置的優(yōu)化功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
這篇文章主要給大家介紹了關(guān)于vue3學(xué)習(xí)筆記之自定義組件的相關(guān)資料,組件系統(tǒng)是Vue.js其中一個重要的概念,它提供了一種抽象,讓我們可以使用獨立可復(fù)用的小組件來構(gòu)建大型應(yīng)用,需要的朋友可以參考下2023-08-08
ElementUI的CheckBox多選框數(shù)據(jù)回顯方式
這篇文章主要介紹了ElementUI的CheckBox多選框數(shù)據(jù)回顯方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家詳細介紹了vue時間線組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue優(yōu)化:常見會導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解
這篇文章主要介紹了Vue優(yōu)化:常見會導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3 element-plus如何使用icon圖標(biāo)組件
這篇文章主要介紹了vue3 element-plus如何使用icon圖標(biāo)組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在本篇文章里小編給大家整理的是一篇關(guān)于Vue中的常用指令及用法總結(jié)內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。2022-01-01