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)文章
函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內(nèi)部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this（不需要實例化的組件）,這篇文章主要給大家介紹了關(guān)于Vue.js函數(shù)式組件的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue 在移動端體驗上的優(yōu)化解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
過濾器是vue為開發(fā)者提供的功能，常用于文本的格式化，過濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，這篇文章通過案例給大家講解Vue過濾器介紹及使用方法，需要的朋友參考下吧2022-11-11
相信大家在項目中經(jīng)常會遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實現(xiàn)Excel本地下載及上傳的示例代碼，需要的可以參考一下2022-07-07
vue3基于elementplus 簡單實現(xiàn)表格二次封裝過程
公司渲染表格數(shù)據(jù)時需要將空數(shù)據(jù)顯示‘-’,并且對于每一列數(shù)據(jù)的顯示也有一定的要求,基于這個需求對element-plus簡單進(jìn)行了二次封裝,這篇文章主要介紹了vue3基于elementplus 簡單實現(xiàn)表格二次封裝過程,需要的朋友可以參考下2024-05-05
vue使用mpegts.js實現(xiàn)播放flv的直播視頻流
這篇文章主要為大家詳細(xì)介紹了vue如何使用mpegts.js實現(xiàn)播放flv的直播視頻流,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01
vue如何實現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示
這篇文章主要介紹了vue如何實現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了解決新建一個vue項目過程中遇到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了Vue模板語法v-bind教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
vue2中的keep-alive使用總結(jié)及注意事項
vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗。本文給大家介紹vue2中的keep-alive使用總結(jié)及注意事項，需要的朋友參考下吧2017-12-12