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

对于那些来这里的人，这是解决方案：

在项目（vue-docgen-web-types）中安装docs：WHERE
将以下内容添加到npm i vue-docgen-web-types

package.json

运行"scripts": { "update-web-types": "vue-docgen-web-types" }, "web-types": "./web-types.json", npm命令。

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

这是您当前在生成的update-web-types文件中得到的内容：

web-types.json

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

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

一切正常！

因此，在运行"source": { "module": "./src/components/General/Page.vue", "symbol": "default" } npm命令之后，只需将所有“ //”替换为“ \”即可。

Jetbrains问题：

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

1 个答案: