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');