뷰(Vue) 프로젝트에서 부트스트랩(Bootstrap) 연동하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

---

 

Vue.js 개발을 하는 도중, UI에 대해서 제가 신경쓰지 않아도 예쁘게 나왔으면 좋겠더라구요.

다들 많이 사용하는 Bootstrap을 연동하여 사용하기로 결정하였습니다.

Bootstrap은 npm에서 설치할 수 있도록 지원한다고 하여 npm 명령어를 통해 설치 및 연동하였습니다.

---

Bootstrap 설치

Bootstrap 설치시 주의해야할 사항이 있습니다.

  첫번째, Vue 프로젝트의 최상위 디렉터리에서 작업해야 합니다.

  두번째, Vue의 버전에 따라 설치해야할 Bootstrap의 버전도 달라지니 확인 후 설치해야 합니다.

 

명령어

• Vue 3이 아닌 경우: npm install vue bootstrap-vue bootstrap
• Vue 3인 경우: npm install bootstrap-vue-3

 

Bootstrap 연동

Bootstrap 연동 작업은 main.js 파일에 Bootstrap 관련 사항을 import 및 use 메소드로 적용하는 과정입니다.

# ASIS #
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')


# TOBE # 
import { createApp } from 'vue'
import App from './App.vue'

import BootstrapVue from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

createApp(App).use(BootstrapVue).mount('#app')

신규 추가된 코드는 Bootstrap관련하여 import하는 3줄과 createApp의 use로 BootstrapVue를 연동하는 작업의 코드 1줄입니다.

 

 

Bootstrap 연동 테스트

파일 수정

vue 파일(*.vue)의 <template> 필드에 Bootstrap 테스트 코드를 넣어 수정합니다.

Vue 프로젝트를 구동하여 정상적으로 결과가 나타나는지 테스트합니다.

 

저의 경우 가장 간단한 코드인 Button을 추가하는 작업을 테스트하였습니다.

<template>
    <div>
        <b-button>Button</b-button>
        <b-button variant="danger">Button</b-button>
        <b-button variant="success">Button</b-button>
        <b-button variant="outline-primary">Button</b-button>
    </div>
</template>

 

실행 결과