web-dev-qa-db-fra.com

Avertissement de balise html inconnu de la prise en charge de Bootstrap-Vue.js dans WebStorm

J'utilise WebStorm 2017.2.4 et le projet Webpack Vue.js. J'ai ajouté bootstrap-vue.js à mon projet et j'aimerais voir des conseils pour lui et le support des composants.

Mais au lieu de cela, j'ai reçu un avertissement "balise html inconnue".

screen

BTW: bootstrap-vue fonctionne comme prévu lors de l'exécution du projet.

Avez-vous des suggestions pour le faire fonctionner?

vue.jsvuejs2webstormbootstrap-4
22
Bullet-tooth

MIS À JOUR le 30/07/2019

PHPShtorm (WebStorm) a été mis à jour vers 2019.2 et maintenant ils ont ajouté un meilleur support pour les bibliothèques vuejs: https://blog.jetbrains.com/webstorm/2019/07/webstorm-2019-2/#development_with_vue I 'ai juste testé et ça marche. enter image description here

VIEILLE réponse

J'ai résolu ce problème en ajoutant des composants manuellement. Selon: https://bootstrap-vue.js.org/docs/#individual-components-and-directives J'ai créé un nouveau fichier, par ex. bootstrap.js enregistre ensuite globalement les composants qui

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);
// ...

Cela fonctionne pour moi dans phpstorm 2018.1

12
Alexandr Vysotsky

Mise à jour: il existe deux façons de corriger l'avertissement "balise html inconnue": (enregistrement global et local)

  1. Enregistrement global:

    Vous devez enregistrer votre composant globalement Vue.component(tagName, options) avant de créer la nouvelle instance Vue. Par exemple:

    Vue.component('my-component', {
  // options
})

    Une fois enregistré, un composant peut être utilisé dans le modèle d'une instance comme élément personnalisé, <my-component></my-component>. Assurez-vous que le composant est enregistré avant d'instancier l'instance racine Vue. Voici l'exemple complet:

    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'
})

    Qui rendra le HTML: :

    <div id="example">
  <div>A custom component!</div>
</div>

  2. Enregistrement local:

    Vous n'avez pas besoin d'enregistrer chaque composant dans le monde. Vous pouvez rendre un composant disponible uniquement dans la portée d'une autre instance/composant en l'enregistrant avec l'option d'instance 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
  }
})

    La même encapsulation s'applique pour les autres fonctionnalités enregistrables Vue, telles que les directives.

En savoir plus sur https://vuejs.org/v2/guide/components.html#Using-Components

Avant la mise à jour:

Dans WebStorm, une bibliothèque est un fichier ou un ensemble de fichiers dont les fonctions et méthodes sont ajoutées aux connaissances internes de WebStorm en plus des fonctions et méthodes que WebStorm récupère du code de projet que vous modifiez. Dans le cadre d'un projet, ses bibliothèques par défaut sont protégées en écriture .

WebStorm utilise des bibliothèques uniquement pour améliorer l'aide au codage (c'est-à-dire l'achèvement du code, la coloration syntaxique, la navigation et la recherche de documentation). S'il vous plaît notez qu'une bibliothèque n'est pas un moyen de gérer les dépendances de votre projet.

Source: https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html

Simplement, mettez à niveau WebStorm de la version 2017.2.4 vers 2017. qui a résolu ce problème. Il est testé.

5
5377037

Bootstrap vue utilise une manière très dynamique de définir les composants. J'utilise PyCharm avec l'extension vuejs qui ne peut pas résoudre les composants lors de l'enregistrement avec

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

Vue.use(Layout)

Ce que j'utilise, c'est de créer un nouveau fichier bootstrap.js dans le répertoire components et enregistrez tous les composants bootstrap que j'utiliserais comme

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);

puis importez ce fichier dans main.js

import './components/bootstrap'

Juste une petite solution plus propre.

4
Nafees Anwar