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