WebStorm 不识别devui组件，提示 未知 HTML 标记

[jijunpeng]

我在webstorm中使用vite+vue+typescript创建了一个新工程，然后使用如下命令添加devui组件库

npm i vue-devui @devui-design/icons devui-theme

接着我修改main.ts文件

// main.ts
import {createApp} from 'vue'
import App from './App.vue'
import 'vue-devui/style.css';
import '@devui-design/icons/icomoon/devui-icon.css';
import DevUI from 'vue-devui'
import {infinityTheme, ThemeServiceInit} from 'devui-theme';
import './style.css'

ThemeServiceInit({ infinityTheme }, 'infinityTheme');

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

然后我就开始在App.vue中使用devui组件，webstorm不能正常识别 devui的标签

<!--App.vue-->
<script setup lang="ts">
import {ref} from 'vue';

const baseTableData = ref([
  {firstName: 'James', lastName: 'Bond', gender: 'Male', date: '2019-05-05'},
  {firstName: 'Miss', lastName: 'Moneypenny', gender: 'Female', date: '2019-05-05'},
  {firstName: 'James', lastName: 'Bond', gender: 'Male', date: '2019-05-05'},
  {firstName: 'Miss', lastName: 'Moneypenny', gender: 'Female', date: '2019-05-05'},
])

</script>

<template>
  <div style="padding: 8px">
    <d-table :data="baseTableData" style="width: 100%">
      <d-column field="firstName" header="First Name"></d-column>
      <d-column field="lastName" header="Last Name"></d-column>
      <d-column field="gender" header="Gender"></d-column>
      <d-column field="date" header="Date of birth"></d-column>
    </d-table>
  </div>
</template>

<style scoped></style>

我在 tsconfig.app.json 中 添加下面的配置也没有作用。（这个写法我是从element-plus 参考的，webstorm可以正常识别element-plus的组件标签）

{
  "compilerOptions": {
    "types": ["vue-devui/global"]
  }
}