WebStorm 中 Bootstrap-Vue.js 支持的未知 html 标签警告

Question

我正在使用 WebStorm 2017.2.4 和 webpack Vue.js 项目。我已将bootstrap-vue.js 添加到我的项目中，并希望查看有关它的提示和组件支持。

但我得到了“未知的 html 标记”警告。

顺便说一句：bootstrap-vue 在运行项目时按预期工作。

你有什么建议可以让它发挥作用吗？

Answer 1

于 2019 年 7 月 30 日更新

PHPShtorm(WebStorm) 已更新至 2019.2，现在他们添加了对 vuejs 库的更好支持： https://blog.jetbrains.com/webstorm/2019/07/webstorm-2019-2/#development_with_vue 我刚刚测试过，它可以工作。

旧答案

我通过手动添加组件解决了这个问题。 根据：https://bootstrap-vue.js.org/docs/#individual-components-and-directives 我创建了新文件，例如bootstrap.js 然后注册需要的全局组件

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import Vue from 'vue';
import navbar from 'bootstrap-vue/es/components/navbar/navbar';
import container from 'bootstrap-vue/es/components/layout/container';
// ...

Vue.component('b-navbar', navbar);
Vue.component('b-container', container);
// ...

它在 phpstorm 2018.1 中对我有用

Answer 2

Bootstrap vue 使用非常动态的方式来定义组件。我正在使用带有 vuejs 扩展的 PyCharm，它在使用注册时无法解析组件

import { Layout } from 'bootstrap-vue/es/components'

Vue.use(Layout)

我用来做的是在components 目录中创建一个新文件bootstrap.js，并注册我会使用的所有引导组件

import Vue from 'vue'

import bContainer from 'bootstrap-vue/es/components/layout/container'
import bRow from 'bootstrap-vue/es/components/layout/row'
import bCol from 'bootstrap-vue/es/components/layout/col'

Vue.component('b-container', bContainer);
Vue.component('b-col', bCol);
Vue.component('b-row', bRow);

然后将这个文件导入main.js

import './components/bootstrap'

只是一个更清洁的解决方案。

Answer 3

更新：有两种方法可以修复“未知 html 标记”警告：（全局和本地注册）

1. 全球注册：

   在创建新的 Vue 实例之前，您应该必须全局注册您的组件 Vue.component(tagName, options)。例如：

   Vue.component('my-component', {
     // options
   })
   

   注册后，组件可以在实例的模板中用作自定义元素<my-component></my-component>。在实例化根 Vue 实例之前，确保组件已注册。这是完整的示例：

   _HTML：

   <div id="example">
     <my-component></my-component>
   </div>
   

   _JS：

   // global register
   Vue.component('my-component', {
     template: '<div>A custom component!</div>'
   })
   
   // create a root instance
   new Vue({
     el: '#example'
   })
   

   _{将呈现 HTML：}：

   <div id="example">
     <div>A custom component!</div>
   </div>
   

2. 本地注册：

   您不必在全局范围内注册每个组件。您可以通过使用components 实例选项注册一个组件，使其仅在另一个实例/组件的范围内可用：

   var Child = {
     template: '<div>A custom component!</div>'
   }
   
   new Vue({
     // ...
     components: {
       // <my-component> will only be available in parent's template
       'my-component': Child
     }
   })
   

   同样的封装适用于其他可注册的 Vue 功能，例如指令。

阅读更多https://vuejs.org/v2/guide/components.html#Using-Components

---

更新前：

在 WebStorm 中，库是一个文件或一组文件，除了 WebStorm 从您编辑的项目代码中检索的功能和方法外，其功能和方法也添加到 WebStorm 的内部知识中.在项目范围内，其库默认情况下是写保护。

WebStorm 仅使用库来增强编码辅助（即代码完成、语法突出显示、导航和文档查找）。 请注意，库不是管理项目依赖项的一种方式。

来源：https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html

只需将 WebStorm 从版本 2017.2.4 升级到 2017.3 即可解决此问题。已经测试过了。