如何让 Volar 了解 Vue 3 中全局可用的组件？

Question

所以我正在开发一个全新的项目，使用 Vue 3 和 Volar 作为 VSCode 的扩展。我正在使用一个组件库 CoreUI。所以在我的main.ts我现在有这个代码。

import { createApp } from 'vue'
import App from './App.vue'
import CoreuiVue from '@coreui/vue'

const app = createApp(App);
app.use(CoreuiVue);

现在这意味着在任何其他 SFC 中我可以使用任何 CoreUI 组件，例如<CAlert color="primary">A simple alert!</CAlert>，而无需导入它。

它编译得很好。在编译过程中，我没有收到来自 TypeScript 或 ESLint 的关于没有正确导入组件的抱怨。因此，这些工具似乎知道这些组件现在在全球范围内可用。

然而，Volar 却不是这样，它是CAlert这样描述的：

换句话说，它无法识别CAlert也不能给我任何智能感知，比如它的属性和属性类型是什么。

我怎样才能让 Volar 明白所有 CoreUI 的组件都是全局可用的？

Answer 1

全局组件应在以下位置声明src/components.d.ts：

\n

import { CAlert } from \'@coreui/vue\'\n\ndeclare module \'@vue/runtime-core\' {\n  export interface GlobalComponents {\n    CAlert: typeof CAlert\n  }\n}\n

\n

\n

Core UI 中使用的每个组件都必须显式声明（当前无法在一行中声明所有组件以进行类型增强），但您可以使用 Node 脚本生成所有 Core 全局组件的类型：

\n

const coreui = require(\'@coreui/vue\')\nconst components = Object.keys(coreui).filter(key => key.startsWith(\'C\') && !key.endsWith(\'Plugin\'))\nconst code = `import * as CoreUI from \'@coreui/vue\'\n\ndeclare module \'@vue/runtime-core\' {\n  export interface GlobalComponents {\n    ${components.map(component => `${component}: typeof CoreUI[\'${component}\']`).join(\'\\n    \')}\n  }\n}\n`\nconsole.log(code)\n

\n

...或复制此演示的输出。

\n

此外，您需要从命令面板（或 IDE 本身）重新启动 Volar 的 Vue 语言服务器，以便 Volar 重新加载输入。按macOS 上的\xe2\x8c\x98+ （或 Windows 上的+ ），然后输入：P\xe2\x8a\x9e WinP>Restart Vue Server

\n

\n