Предупреждение о неизвестном 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-тег": (глобальная и локальная регистрация)
-
Глобальная регистрация:
Вы должны зарегистрировать свой компонент глобально 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>
-
Местная регистрация:
Вам не нужно регистрировать каждый компонент в глобальном масштабе. Вы можете сделать компонент доступным только в области действия другого экземпляра/компонента, зарегистрировав его с помощью опции экземпляра 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'
Просто немного чище.