Element-Plus-全局自动引入图标组件,无需每次import

效果图

配置如下

1、核心代码修改main.js/ts

javascript 复制代码
//main.js
// 全局注册图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(ElementPlusIconsVue)

2、完整代码

javascript 复制代码
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
// 全局注册图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// app声明
const app = createApp(App);
//核心代码
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
// use
app.use(ElementPlusIconsVue)
// mount
app.mount('#app')

重启即可

相关推荐
vipbic1 小时前
用 Turborepo 打造 Strapi 插件开发的极速全栈体验
前端·javascript
天涯学馆1 小时前
为什么 JavaScript 可以单线程却能处理异步?
前端·javascript
Henry_Lau6171 小时前
主流IDE常用快捷键对照
前端·css·ide
陶甜也1 小时前
使用Blender进行现代建筑3D建模:前端开发者的跨界探索
前端·3d·blender
我命由我123452 小时前
VSCode - Prettier 配置格式化的单行长度
开发语言·前端·ide·vscode·前端框架·编辑器·学习方法
HashTang2 小时前
【AI 编程实战】第 4 篇:一次完美 vs 五轮对话 - UnoCSS 配置的正确姿势
前端·uni-app·ai编程
JIngJaneIL2 小时前
基于java + vue校园快递物流管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js
asdfg12589632 小时前
JS中的闭包应用
开发语言·前端·javascript
kirk_wang3 小时前
Flutter 导航锁踩坑实录:从断言失败到类型转换异常
前端·javascript·flutter