一.安装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>
