UI框架-element-ui---图标管理和调用

一.安装Element Plus

$ npm install element-plus --save

二.在main.js全局注册图标

import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) // 注册为全局组件 }

三.router.js路由配置中使用字符串标识符

const routes = [ { path: '/dashboard', meta: { icon: 'Platform', // 只是字符串，不是直接调用 name: '控制台' } } ]

四.在布局组件中使用图标

<template> <div class="sidebar"> <div v-for="item in menuItems" :key="item.path"> <!-- 使用动态组件 --> <component :is="item.meta.icon" /> {{ item.meta.name }} </div> </div> </template> <script setup> import { computed } from 'vue' import { useRouter } from 'vue-router' const router = useRouter() const menuItems = computed(() => router.getRoutes().filter(route => route.meta?.icon) ) </script>