让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-typesnpm 命令。

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

这是您当前在生成的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：改进全局组件的检测