vue에 부트스트랩 적용

https://bootstrap-vue.org/

BootstrapVue

 

---

1. 패키지 설치

적용하고자 하는 Vue 프로젝트에서 bootstrap-vue 패키지를 설치한다

npm install vue bootstrap-vue bootstrap

 

2. main.js에 추가

Vue에서 bootstrap-vue를 사용할 수 있도록 main.js에 bootstrap-vue를 추가한다.

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css' 
import 'bootstrap-vue/dist/bootstrap-vue.css' 

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

main.js의 전체 코드는 다음과 같다.

 

import Vue from 'vue'
import App from './App'
import router from './router'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css' 
import 'bootstrap-vue/dist/bootstrap-vue.css' 

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

3. bootstrap-vue 사용

bootstap-vue의 대부분의 component는 b- 로 시작한다. 공식문서를 참조하여 원하는 component를 가져다 쓰면 된다.

 

<template>
  <div id="app">
    <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>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {

}
</style>

결과 화면