Element-plus的icon图标不显示解决方案

一名爱学习的ikun

已于 2024-01-27 19:34:00 修改

阅读量4.5k

点赞数 16

文章标签： vue.js 前端 javascript

于 2024-01-27 19:25:07 首次发布

本文链接：https://blog.youkuaiyun.com/ZYXKN/article/details/135886682

版权

Vue升级到Vue3，Element为了适应vue3，从Element-ui升级到了Element-plus，这个升级改动了不小。icon就算其中一个，plus中将icon组件化了，要注册才能使用，不像ui那版一样使用那么方便了，这到底是升级了还是退步了呢，咱也不知道。

步骤

1.安装element-plus

这篇文章就记录一下vue3环境下element-plus怎么使用icon图标，首先你要安装了element-plus。

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

你不喜欢他整套的，就想用它icon图标那也没问题单独安装就行了

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

2.引用icon图标

然后就是引用icon图标，<el-icon><House /></el-icon> 里面的House就是图标的名字，el-icon是标签。

<el-menu-item index="/">
            <el-icon>
              <House />
            </el-icon>
            <span>首页</span>
 </el-menu-item>

3.注册组件

3.1局部注册

做完上面那2步图标还是不会显示的，因为你没有注册，vue不知道 <House />是个什么东西，现在演示的是局部注册，适合只有几个页面就用几个小图标的。数量比较少。

选项式api的写法（vue2）

这里的vue2是指这语法是像以前的vue2那样写，vue3中能写vue2的那种api的

<script>
   import { House } from '@element-plus/icons-vue'

    export default {
        components: {
           House
        },
    }
</script>

组合式aip的写法（vue3）

是不是组合式的更简便一点？因为他使用了setup语法糖，会自动帮你return。

<script setup>
import { House } from '@element-plus/icons-vue'

</script>

3.2全局注册

介绍完局部注册了，现在介绍全局注册，这种适合你好几个页面用到他的icon图标而且数量比较多，那你总不能用到哪个就去注册哪个吧，那多麻烦呀！所以我们用全局注册，这样再也不用去import xxx 了。

想必你用了element你肯定再main.js那importelement-plus了吧，结构应该和我差不多吧。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/global.css'
createApp(App).use(router).use(ElementPlus).mount('#app')

那现在就只需要几步就能全局注册了！改造成下面这样下面那个for循环就起到了遍历ElementPlusIconsVue这个对象里面所有的键值，然后全部注册。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/global.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App);

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

app.use(router).use(ElementPlus);
app.mount('#app');