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

更新：有两种方法可以修复＆＃34;未知的html标记＆＃34;警告:(全球和本地注册）

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。经过测试。

Answer 3

Bootstrap vue使用非常动态的方式来定义组件。我正在使用带有vuejs扩展名的PyCharm，当使用

注册时，该扩展名无法解析组件

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'

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