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

重启即可

相关推荐
郭老二1 天前
【前端】vue3:编译步骤
前端
不在逃避q1 天前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁1 天前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One9851 天前
高进度算法模板速记(待完善)
java·前端·算法
陈随易1 天前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师1 天前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174461 天前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈1 天前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen1 天前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒1 天前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端