09vue3实战-----引入element-plus组件库中的图标

09vue3实战-----引入element-plus组件库中的图标

element-plus中的icon图标组件的使用和其他平台组件(如el-button按钮)是不一样的。

1.安装

javascript 复制代码
npm install @element-plus/icons-vue

2.引入

在这我们只讲述最方便的一种引入方法------完整引入。这需要从@element-plus/icons-vue 中导入所有图标并进行全局注册

main.ts:

javascript 复制代码
// 如果您正在使用CDN引入,请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
//循环遍历图标组件数组
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

3.优化

在大型项目中,经常需要注册各类组件库或者插件。如果把代码都写在main.ts,当项目很大时候可能该文件会比较复杂。可以把上述注册所有图标组件的代码抽离成一个文件来解决该问题。

新建global文件夹,在此基础上新建一个ts文件来注册图标组件:

register-icons.ts:

javascript 复制代码
import type { App } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

function registerIcons(app: App<Element>) {
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
}

export default registerIcons;

上面的代码中需要注意registerIcons函数中传入的app,需要知道app的类型。自从使用了ts之后,相信很多人都对很多比较复杂的对象的类型不是清楚,比如这里的app。我们可以ctrl+鼠标左键点击main.ts文件中的createApp进入源码。

再ctrl+鼠标左键点击CreateAppFunction:

发现该函数为App类型,而且带有一个泛型。所以此处的代码如下:

然后再main.ts中注册:

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import registerIcons from './global/register-icons'

const app = createApp(App)
app.use(registerIcons)

app.mount('#app')
相关推荐
cxr8281 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
emma羊羊1 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿4 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊4 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅4 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防5 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump5 小时前
前端部署工具 PinMe
运维·前端·开源
-D调定义之崽崽6 小时前
【初学】使用 node 编写 MCP Server
typescript·node·mcp
Baklib梅梅6 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士6 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端