web-dev-qa-db-ja.com

WebStormでのBootstrap-Vue.jsサポートの不明なHTMLタグ警告

WebStorm 2017.2.4とwebpack Vue.jsプロジェクトを使用しています。プロジェクトに bootstrap-vue.js を追加しました。プロジェクトのヒントとコンポーネントのサポートを確認したいと思います。

しかし、その代わりに「Unknown html tag」警告が表示されます。

screen

ところで、プロジェクトを実行するとき、bootstrap-vueは期待どおりに機能します。

動作させる方法について何か提案はありますか？

vue.jsvuejs2webstormbootstrap-4
22
Bullet-tooth

2019/07/30に更新

PHPShtorm（WebStorm）は2019.2に更新され、vuejsライブラリのより良いサポートが追加されました： https://blog.jetbrains.com/webstorm/2019/07/webstorm-2019-2/#development_with_vue Iちょうどテストし、動作します。 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で動作します

12
Alexandr Vysotsky

更新：「不明なhtmlタグ」警告を修正する2つの方法があります：（グローバルおよびローカル登録）

  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では、libraryは、WebStormの機能とメソッドに加えて、機能とメソッドがWebStormの内部知識に追加されるファイルまたはファイルのセットです編集するプロジェクトコードから取得します。プロジェクトの範囲では、そのライブラリはデフォルトでwrite-protectedです。

WebStormは、コーディング支援（つまり、コード補完、構文の強調表示、ナビゲーション、ドキュメント検索）を強化するためにのみライブラリを使用します。 ライブラリはプロジェクトの依存関係を管理する方法ではないことに注意してください.

ソース： https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html

単純に、WebStormをバージョン2017.2.4から 2017. にアップグレードすると、この問題が修正されました。テスト済みです。

5
5377037

Bootstrap vueは、コンポーネントを定義する非常に動的な方法を使用します。vuejs拡張を使用してPyCharmを使用していますが、登録時にコンポーネントを解決できません。

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

Vue.use(Layout)

私がすることは、新しいファイルを作成することですbootstrap.jscomponentsディレクトリで、すべてのbootstrap=使用するコンポーネントを登録します

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'

ほんの少しきれいなソリューション。

4
Nafees Anwar