WebStorm 无法识别 Semantic-ui-vue 组件

Question

我使用 WebStorm 作为我的 IDE，通常 Vue 组件被识别为有效的 HTML 标签，但此集成的组件却不是。有人对如何解决这个问题有任何想法吗？

应用程序.vue

<template>
  <div id="app">
    <sui-menu fixed inverted>
      <sui-container>
        <a href="#" is="sui-menu-item" class="header">
          <img src="/src/assets/logo.png" class="logo">
          Project Name
        </a>

        <a is="sui-menu-item" href="#">Home</a>
      </sui-container>
    </sui-menu>

    <sui-container class="main" text>
      <sui-header size="huge">Semantic UI Vue Fixed Template</sui-header>
      <p>This is a basic fixed menu template using fixed size containers.</p>

      <test></test>

    </sui-container>
  </div>
</template>

<script>
  export default {};
</script>

main.js

import Vue from "vue";
import App from "./App";
import SuiVue from "semantic-ui-vue";
import 'semantic-ui-css/semantic.min.css';
import Test from './Test.vue';

Vue.use(SuiVue);

new Vue({
  el: "#app",
  template: '<App/>',
  components: { App }
});

Vue.component('test', Test);

WebStorm 截图（我使用的是最新版本）

Answer 1

这个解决方案（受 bootstrap-vue-3 启发）对我有用：

import Skeleton from "@/components/ui/skeleton/Skeleton.vue";
import type { DefineComponent } from "vue";

declare module "@vue/runtime-core" {
  export interface GlobalComponents {
    // Define component and it's props here
    Skeleton: DefineComponent<{ class: string; show: boolean }>;
  }
}

app.component("Skeleton", Skeleton);