如何让 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:

中声明

import { CAlert } from '@coreui/vue'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    CAlert: typeof CAlert
  }
}

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

const coreui = require('@coreui/vue')
const components = Object.keys(coreui).filter(key => key.startsWith('C') && !key.endsWith('Plugin'))
const code = `import * as CoreUI from '@coreui/vue'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    ${components.map(component => `${component}: typeof CoreUI['${component}']`).join('\n    ')}
  }
}
`
console.log(code)

...或复制 demo.

的输出

此外，您需要从 command palette（或 IDE 本身）重新启动 Volar 的 Vue 语言服务器，以便 Volar 重新加载输入。在 macOS 上按 ⌘+P（或 ⊞ Win+P 在 Windows 上），然后键入 >Restart Vue Server:

如何让 Volar 知道 Vue 3 中的全局可用组件？

How can I make Volar aware of globally available components in Vue 3?

typescript

vue.js

visual-studio-code

vuejs3

core-ui