Vue3中使用Ant Design Vue图标

最新推荐文章于 2025-06-29 22:50:42 发布

原创

最新推荐文章于 2025-06-29 22:50:42 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#ant design vue #antd图标使用 #vue.js

本文将指导你如何在Vue3项目中使用Ant Design Vue库的图标。首先，你需要通过npm安装ant design vue，然后在项目中引入并使用图标组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

npm i --save ant-design-vue@next   //注意后边一定要@next否则会报错，文档上没有加

2、引入

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.config.productionTip = false;

createApp(App).use(Antd).mount('#app')

3、使用

<template>
  <div>
    <a-breadcrumb>
    <a-breadcrumb-item href="">
      <a-icon ><HomeOutlined/></a-icon>
    </a-breadcrumb-item>
    <a-breadcrumb-item href="">
      <a-icon><UserOutlined/></a-icon>
      <span>Application List</span>
    </a-breadcrumb-item>
    <a-breadcrumb-item>
      Application
    </a-breadcrumb-item>

  </a-breadcrumb>
    <a-button-group>
      <a-button type="primary"> <LeftOutlined/>Go back </a-button>