Adding Bootstrap to a Vue CLI Project

[topgaren]

npm 모듈 설치

$ npm install bootstrap jquery popper.js

@/main.js에 모듈 import

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

Bootstrap Demo code

@/components/HelloWorld.vue 파일 <h1> 태그 아래에 다음 코드를 추가.

<div class="alert alert-success alert-dismissible fade show" role="alert">
    With Bootstrap!
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

서버를 실행하고 localhost:8080에 접속하면 다음과 같은 Vue 메인 화면이 작동한다.

Reference https://travishorn.com/adding-bootstrap-to-a-vue-cli-project-98c2a30e0ed0