我使用 WebStorm 作为我的 IDE,通常 Vue 组件被识别为有效的 HTML 标签,但此集成的组件却不是。有人对如何解决这个问题有任何想法吗?
<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>
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 截图(我使用的是最新版本)
这个解决方案(受 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);