在 WebStorm 中使用 Ant Design Vue 以及配套图标时，IDE 一直提示：未知 HTML 标记

超级大福宝

已于 2025-06-29 23:12:32 修改

阅读量338

点赞数 3

CC 4.0 BY-SA版权

于 2025-06-29 22:50:42 首次发布

本文链接：https://blog.csdn.net/weixin_47778392/article/details/149004252

近期在做一个全栈项目，但 IDE 一直无法识别 Ant Design Vue 自带的一部分组件，例如a-layout-header，一直报“未知 HTML 标记”，但又有一部分插件可以正常识别，例如a-menu，但a-menu中 mode="horizontal" 也警告有问题。

折腾了半天发现，原来是 Ant Design Vue 的版本太旧了，之前的版本是 3.2.15 ，在升级到 3.2.20 以后，这些问题全部消失了。

Ant Design Vue 的图标也无法识别，依葫芦画瓢更新一下，使用如下的命令

pnpm install @ant-design/icons-vue@latest

但是，更新完以后 IDE 还是无法识别图标相关的组件。

在这里插入图片描述
似乎有一种旧的写法a-icon ，我尝试了一下，发现 IDE 没有报问题，但实际上并没有成功加载，可能这种写法已经被废弃了，如果感兴趣的话可以看一下文末的参考资料¹。实际上，最好的解决方法如下

不要在 main.js 中全局引入图标。（相关代码如下所示）

import * as Icons from '@ant-design/icons-vue';

const icons = Icons;
for (const i in icons) {
    app.component(i, icons[i]);
}

取而代之的是在每个 vue 文件中单独引入所需的图标，并且要在export中把他们加入components中，导入和导出的时候需要使用大驼峰的写法。
使用组件时，似乎大驼峰和用-连接两种写法都可以，在下面的例子¹中，message-outlined 可以改成 MessageOutlined，但官网给的是用-连接的写法²。

<template>
  <message-outlined :style="{fontSize: '16px', color: '#08c'}" />
</template>
<script>
  import { MessageOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: {
      MessageOutlined,
    },
  });
</script>