2017-12-01 1 views
0

이것은 후속 질문 인 my last question이며, Node.js의 최소 설치 ontop에서 Vue 및 Bootstrap을 작동 시키려고합니다. 이를 위해 패키지 관리자 나 CDN을 사용하지 않고 대신 웹 페이지 옆에 필요한 모든 파일이 있습니다.부트 스트랩 - 뷰가 고장 났습니까?

이제 Bootsrap 및 Vue를 사용하는 대신 Vue와 함께 Bootstrap-Vue 라이브러리를 사용하고 있지만 문제가 발생하지 않았습니다. 모든 부트 스트랩 - 뷰 요소는 일반 텍스트로 표시하는 것, 그래서 내가 가장 간단한 상상할 설치했다 다시 때까지 내 방식대로 일을 시작 :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Index</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
     <link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"/> 
     <link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css"/> 
    </head> 
    <body> 

     <div class="text-center my-3"> 
      <b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-btn> 
     </div> 

     <script src="https://unpkg.com/vue"></script> 
     <script src="https://unpkg.com/[email protected]/dist/polyfill.min.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script> 

    </body> 
</html> 

그러나 심지어이 슈퍼 간단한 웹 페이지가 제대로 표시되지됩니다. 기본 부트 스트랩 구성 요소로 테스트해도 작동하지만 모든 부트 스트랩 - Vue 구성 요소는 작동하지 않습니다. Vue가 실행 중이며 Debug Console에서 필요한 모든 스크립트 파일을 성공적으로 요청했다고 알려줍니다.

Node.js를 통해 요청하거나 수동으로 문서를 여는 것에 관계없이 웹 페이지는 똑같이 보입니다.

그래서 문제가 무엇입니까?

답변

1

템플릿에 Vue을 (를) 적용 하시겠습니까?

new Vue({ 
 
    el: '#app' 
 
});
<link href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" /> 
 
<script src="https://unpkg.com/vue"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script> 
 

 
<div id="app" class="text-center my-3"> 
 
    <b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-btn> 
 
</div>

+0

그래, 그건 속임수를 썼는지 무엇! –

관련 문제