Vue 3 Ant Design Vue 动态渲染icons

最新推荐文章于 2025-09-24 23:44:43 发布

原创最新推荐文章于 2025-09-24 23:44:43 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #typescript

本文介绍如何使用Vue框架创建应用程序，并集成了Ant Design组件库及图标库，实现了一个包含首页路由的基本项目结构。

//main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import Antd from 'ant-design-vue'
import * as antIcons from '@ant-design/icons-vue' // 引入ant icons

import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

const antIconsList: any = antIcons; // 重新赋值定义类型 避免后续遍历注册组件的时候ts报错
// 注册组件
// Object.keys(antIconsList).forEach(key => {
//     app.component(key, antIconsList[key])
// })
for (const key in antIconsList) {
    app.component(key, antIconsList[key])
}
app.config.globalProperties.$antIcons = antIcons; // 挂在到vue实例上

app.use(router).use(createPinia()).use(Antd).mount('#app')

<!-- .vue -->
<component :is="proxy.$antIcons[item.meta.icon]" />

// .vue
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

// route.ts

export const Home = [
    {
        path: '/index',
        name: 'index',
        meta: {
            title: '首页',
            hide: false,
            icon: 'HomeOutlined' // 引入ant 的icon名称
        },
        redirect: `/home`,
        component: () => import('../views/home/index.vue'),
        children: [
            {
                path: '/home',
                name: 'home',
                meta: {
                    title: '系统首页',
                    hide: false
                },
                component: () => import('../views/home/home.vue')
            }
        ]
    }
]