找了很多文章，发现大部分是挂着vuecli3的名，实际是vuecli2.x的内容，在请教大佬后，还是决定记录下来，为前来踩坑的小伙伴填一些坑。

大家可以看到官方文档里面写了图标使用方法，结果根据官方文档来写，就会发现图标报出⚠

图片.png

到处找是不是自己哪里和文档的步骤不一样，是不是少了啥，然后又跟着文档走一遍，还是不对，内心奔溃。百度半天都没有找到有用的方案。

下面就来说下Ant Design 图标在vuecli3以上版本的使用方法

1.在脚手架中引入Ant Design
2.在main.js文件中写入：
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
3.在需要使用的页面引入对应的图标
举个例子，我要在home.vue里面使用

图片.png

import HomeOutlined from '@ant-design/icons-vue/HomeOutlined'
export default defineComponent({
name: "Home",
  components:{
     HomeOutlined
  }
}）

在页面使用：<home-outlined></home-outlined>就可以了。