让WebStorm了解全局注册了哪些vue组件

Question

如果我的一些 vue 组件在全局注册，我怎样才能让 WebStorm 理解它并帮助我自动完成？我有一些从主 js 文件全局注册的自定义 ui 组件，如下所示：

  const requireComponent = require.context(
    './components',
    true,
    /^\.\/ui-kit\/global\/.*ui-.*\.vue$/
  )

  requireComponent.keys().forEach(function(fileName) {
    let baseComponentConfig = requireComponent(fileName)
    baseComponentConfig = baseComponentConfig.default || baseComponentConfig

    let baseComponentName =
      baseComponentConfig.name ||
      fileName.replace(/^.+\//, '').replace(/\.\w+$/, '')

    Vue.component(baseComponentName, baseComponentConfig)
  })

所以我想使用这样的组件而不需要任何导入。我可以，但唯一的问题是我没有从 WS 识别此类组件。

WebStorm 也将此标签标记为

未知的 html 标签 ui-input

此检查突出显示未知的 HTML 标签，并让我们将此类标签标记为自定义，以避免将来将它们突出显示为未知

当然，如果我手动导入该组件，WebStorm 的建议就可以正常工作。

Answer 1

对于来到这里的人，这就是解决方案：

1. 在您的项目中安装vue-docgen-web-types（docs）：

   npm i vue-docgen-web-types

2. 将以下内容添加到

   package.json

    "scripts": {
        "update-web-types": "vue-docgen-web-types"
    },
    "web-types": "./web-types.json",

3. 运行

   update-web-types

   npm 命令。

如果您还希望能够单击自定义组件来导航到源文件，那么您必须执行以下操作，因为当前存在路径错误：

这是您当前在生成的

web-types.json

文件中获得的内容：

          "source": {
            "module": "./src\\components\\General\\Page.vue",
            "symbol": "default"
          }

但是如果您将路径修复为：

          "source": {
            "module": "./src/components/General/Page.vue",
            "symbol": "default"
          }

一切正常！

因此，在运行

//

npm 命令后，只需将所有“

\

”替换为“

update-web-types

”即可。

Jetbrains 问题：

• Vue + TypeScript：无法识别全局注册的组件
• Vue：改进全局组件的检测

Answer 2

这个解决方案（受 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);