如何让 VSCode 识别 Vue 中的全局组件？答案

【问题标题】：How to make VSCode recognize global component in Vue?如何让 VSCode 识别 Vue 中的全局组件？
【发布时间】：2021-10-30 18:25:00
【问题描述】：

你好，我有一个项目：

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

我已经制作了一个全局组件Icon，因为它几乎在所有地方都使用，所以我可以直接键入它而无需导入组件。问题是 VSCode 认为这是一些错误（没有导入）。

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

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

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

【问题讨论】：

标签： typescript vue.js visual-studio-code

【解决方案1】：

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

在Volar github 上有：

定义全局组件

"本地组件、内置组件、原生 HTML 元素类型检查无需配置即可使用。对于 Global 组件，需要定义 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 {}

【讨论】：