typescript - 如何让 VSCode 识别 Vue 中的全局组件？

Question

你好，我有一个项目：

Vite -> Vue 3 -> Typescript（我将 Volar 用于 .vue 语法）

而且我制作了一个全局组件图标，因为它几乎无处不在，所以我可以在不导入组件的情况下输入它。问题是 VSCode 认为这是一些错误（没有导入）。

该组件运行良好。它被导入到main.ts中的 vue 应用程序中，如下所示：

// registration of global component <Icon />
import IconComponent from './components/ui/icon/IconComponent.vue'
app.component('Icon', IconComponent)

知道如何告诉 VSCode “嘿，这是一个全局组件，所以不要在其他 .vue 文件中将其标记为错误”？:)

标签： typescriptvue.jsvisual-studio-code

Answer 1

我想我已经找到了答案，所以我会在这里发布。

在Volar github上有：

定义全局组件

“本地组件、内置组件、原生 HTML 元素类型检查无需配置即可。对于全局组件，需要定义 GlobalComponents 接口，例如：”

// components.d.ts

// declare module '@vue/runtime-core' works for vue 3
// declare module 'vue' works for vue2 + vue 3
declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

export {}