只安装ant-design时使用组件和图标
npm install ant-design-vue
yarn add ant-design-vue
项目中全局引入ant-design
// 引入所有图标
import * as Icons from "@ant-design/icons-vue";
// 全局注册
const app = createApp(App);
Object.keys(Icons).forEach((key: any) => {
app.component(key, Icons[key])
})
// 添加到全局(可加可不加)
app.config.globalProperties.$icons= Icons
app.use(Antd).use(router).mount('#app')
使用
没有app.config.globalProperties.$icons= Icons
可使用短横线链接的形式或首字母大写的形式
<template>
<div>
<component is="radar-chart-outlined"></component>
<component is="RadarChartOutlined"></component>
</div>
</template>
有app.config.globalProperties.$icons= Icons
必须使用首字母大写的形式
<template>
<div>
<component :is="$icons['StepBackwardOutlined']"></component>
<component :is="$icons[myicon]"></component>
</div>
</template>
<script setup>
import {ref} from 'vue'
const myicon = ref("RadarChartOutlined")
</script>
单独安装了图标的包时使用图标
npm install @ant-design/icons-vue
yarn add @ant-design/icons-vue
在script中引入
有setup
<script setup>
import { UserOutlined } from '@ant-design/icons-vue';
</script>
没有setup
,需要在componets中注册组件
<script>
import { UserOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
UserOutlined
},
});
</script>
使用
<template>
<div>
<UserOutlined/>
</div>
</template>