WebStorm에서 Bootstrap-Vue.js 지원에 대한 알 수 없는 html 태그 경고

WebStorm에서 Bootstrap-Vue.js 지원에 대한 알 수 없는 html 태그 경고

WebStorm 2017.2.4와 Webpack Vue.js 프로젝트를 사용하고 있습니다.프로젝트에 bootstrap-vue.js를 추가했습니다.이 프로젝트에 대한 힌트와 컴포넌트 지원을 원합니다.

하지만 그 대신 "Unknown html tag" 경고가 표시되었습니다.

BTW: bootstrap-vue는 프로젝트 실행 시 예상대로 작동합니다.

어떻게 하면 효과가 있을 것 같습니까?

2019/07/30 갱신

PHPStorm(WebStorm)이 2019.2로 업데이트되어 vuejs 라이브러리에 대한 더 나은 지원이 추가되었습니다. https://blog.jetbrains.com/webstorm/2019/07/webstorm-2019-2/ #development_with_vue는 방금 테스트한 후 작동합니다.

오래된 답변

저는 이 문제를 수동으로 컴포넌트를 추가하여 해결했습니다.https://bootstrap-vue.js.org/docs/ #개별 컴포넌트 및 디렉티브에 따라 새로운 파일(bootstrap.directions 등)을 작성한 후 필요한 컴포넌트를 글로벌하게 등록합니다.

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에서 사용할 수 있습니다.

부트스트랩 vue에서는 매우 동적인 방법으로 구성 요소를 정의합니다.등록 시 컴포넌트를 해결할 수 없는 vuejs 확장 기능을 가진 PyCharm을 사용하고 있습니다.

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

다음으로 이 파일을 Import 합니다.main.js

import './components/bootstrap'

그냥 좀 더 깨끗한 해결책일 뿐이야.

갱신일 :"Unknown html tag" 경고를 수정하려면 (글로벌 및 로컬 등록) 두 가지 방법이 있습니다.

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

   다음과 같습니다_{Which will render 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에서 라이브러리는 편집한 프로젝트 코드에서 WebStorm이 가져오는 함수 및 메서드와 더불어 WebStorm의 내부 지식에 추가된 파일 또는 파일 세트입니다.프로젝트의 범위에서 라이브러리는 기본적으로 쓰기 금지되어 있습니다.

WebStorm은 코드 작성 지원(코드 완성, 구문 강조 표시, 탐색 및 문서 검색)을 강화하기 위해 라이브러리를 사용합니다.라이브러리는 프로젝트 의존성을 관리하는 방법이 아닙니다.

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

간단히 말해서 WebStorm을 버전 2017.2.4에서 이 문제를 해결한 2017.3으로 업그레이드하십시오.테스트 완료입니다.

언급URL : https://stackoverflow.com/questions/46241523/unknown-html-tag-warning-of-bootstrap-vue-js-support-in-webstorm