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

重启即可

相关推荐
gnip32 分钟前
可重试接口请求
前端·javascript
若梦plus37 分钟前
模块化与package.json
前端
烛阴42 分钟前
Aspect Ratio -- 宽高比
前端·webgl
若梦plus1 小时前
Node.js中util.promisify原理分析
前端·node.js
gnip1 小时前
滚动元素到可视区
前端·javascript
噫酱永不放弃1 小时前
愈发简单的 JS 库开发
前端·rollup.js
归辞...1 小时前
「iOS」————单例与代理
开发语言·javascript·ios
若梦plus1 小时前
Xata低代码服务器端数据库平台之技术分析
前端·后端
摆烂工程师1 小时前
GPT-5 即将凌晨1点进行发布,免费用户可以使用 GPT-5
前端·人工智能·程序员
若梦plus1 小时前
Xano低代码后端开发平台之技术分析
前端·后端