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

Question

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

但我没有得到"未知的HTML标签"警告.

BTW:bootstrap-vue在运行项目时按预期工作.

您对如何使其有效有任何建议吗？

Answer 1

我通过手动添加组件解决了这个问题.根据: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

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

1. 全球注册：

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

   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. 本地注册：

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

   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，即可解决此问题。经过测试。

Answer 3

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

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

Vue.use(Layout)

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

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'

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