Предупреждение о неизвестном html-теге поддержки Bootstrap-Vue.js в WebStorm

Я использую WebStorm 2017.2.4 и проект webpack Vue.js. Я добавил bootstrap-vue.js в свой проект и хотел бы увидеть подсказки для него и поддержки компонентов.

Но вместо этого у меня появилось предупреждение "Неизвестный html-тег".

screen

BTW: bootstrap-vue работает, как ожидалось, при запуске проекта.

Есть ли у вас какие-либо предложения, как заставить его работать?

Ответ 1

ОБНОВЛЕНО 2019/07/30

PHPShtorm (WebStorm) был обновлен до 2019.2, и теперь они добавили лучшую поддержку библиотек vuejs: https://blog.jetbrains.com/webstorm/2019/07/webstorm-2019-2/#development_with_vue Я только что проверил, и это работает. enter image description here

СТАРЫЙ ответ

Я решил эту проблему, добавив компоненты вручную. По словам: 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

Ответ 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. Местная регистрация:

    Вам не нужно регистрировать каждый компонент в глобальном масштабе. Вы можете сделать компонент доступным только в области действия другого экземпляра/компонента, зарегистрировав его с помощью опции экземпляра components:

    var Child = {
      template: '<div>A custom component!</div>'
    }
    
    new Vue({
      // ...
      components: {
        // <my-component> will only be available in parent 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, в которой исправлена эта проблема. Это проверено.

Ответ 3

Bootstrap vue использует очень динамичный способ определения компонентов. Я использую PyCharm с расширением vuejs, которое не может разрешить компоненты при регистрации с использованием

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'

Просто немного чище.