template - Advertencia de etiqueta html desconocida del soporte Bootstrap-Vue.js en WebStorm

webstorm vue

Question

Estoy usando WebStorm 2017.2.4 y el proyecto webpack Vue.js. He agregado bootstrap-vue.js a mi proyecto y me gustaría ver sugerencias para el soporte y los componentes.

Pero en lugar de eso, tengo la advertencia "Unknown html tag".

Por cierto: bootstrap-vue funciona como se esperaba cuando se ejecuta el proyecto.

¿Tienes alguna sugerencia de cómo hacer que funcione?

Answer 1

Actualizado: hay dos formas de corregir la advertencia de "Etiqueta html desconocida": (Registro global y local)

1. Registro Global:

   Debe tener que registrar su componente globalmente Vue.component(tagName, options) antes de crear la nueva instancia de Vue. Por ejemplo:

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

   Una vez registrado, un componente se puede usar en la plantilla de una instancia como un elemento personalizado, <my-component></my-component> . Asegúrese de que el componente esté registrado antes de crear una instancia de la instancia de Vue raíz. Aquí está el ejemplo completo:

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

   _{El cual renderizará HTML} ::

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

2. Registro Local:

   No tiene que registrar todos los componentes globalmente. Puede hacer que un componente esté disponible solo en el ámbito de otra instancia / componente registrándolo con la opción de instancia de 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 misma encapsulación se aplica a otras características de Vue registrables, como las directivas.

Lea más en https://vuejs.org/v2/guide/components.html#Using-Components

Antes de la actualización:

En WebStorm, una biblioteca es un archivo o un conjunto de archivos cuyas funciones y métodos se agregan al conocimiento interno de WebStorm además de las funciones y métodos que WebStorm recupera del código del proyecto que edita. En el ámbito de un proyecto, sus bibliotecas por defecto están protegidas contra escritura .

WebStorm usa bibliotecas solo para mejorar la asistencia de codificación (es decir, la finalización del código, el resaltado de sintaxis, la navegación y la búsqueda de documentación). Tenga en cuenta que una biblioteca no es una forma de administrar las dependencias de su proyecto.

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

Simplemente, actualice WebStorm de la versión 2017.2.4 a 2017.3 que solucionó este problema. Se prueba

Answer 2

Bootstrap vue utiliza una forma muy dinámica de definir componentes. Estoy usando PyCharm con la extensión vuejs que no puede resolver los componentes cuando se registra usando

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

Vue.use(Layout)

Lo que suelo hacer es crear un nuevo archivo bootstrap.js en el directorio de components , y registrar todos los componentes de bootstrap que usaría como

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

y luego importar este archivo en main.js

import ''./components/bootstrap''

Solo una solución un poco más limpia.

Answer 3

Resolví este problema agregando componentes manualmente. De acuerdo con: https://bootstrap-vue.js.org/docs/#individual-components-and-directives Creé un nuevo archivo, p. Ej. Bootstrap.js luego registre globalmente los componentes necesarios.

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

Funcionó para mí en phpstorm 2018.1