Vue 예제 - BootStrap Vue 적용

npm install vue bootstrap bootstrap-vue-3

- VsCode에 해당 명령어를 입력해서 bootstrap을 install 합니다.

 

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import BootstrapVue3 from 'bootstrap-vue-3';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

const app = createApp(App)
app.use(BootstrapVue3)
app.use(router)
app.mount('#app')

bootstrap-vue-3로 되어있는부분을 추가합니다.

 

MainView.vue

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

테스트로 main에 부트스트랩이 적용된 코드를 넣어서 확인해봅니다.