bootstrap-vue 설치

설치는 간단하다.

bootstrap-vue 가이드에는 하기와 같이 나와 있으므로 반드시 vue2로 진행하도록 한다.

 

• Vue.js v2.6 is required, v2.6.12 is recommended
• Bootstrap v4.3.1 is required, v4.6.1 is recommended
• Popper.js v1.16 is required for dropdowns (and components based on dropdown), tooltips, and popovers. v1.16.1 is recommended
• PortalVue v2.1 is required by Toasts, v2.1.7 is recommended

vue3가 괜잖기는 한데 주변에 지원하는 컴퍼넌트 들이 아직 제대로 지원이 안된다. T.T

Vue.js 프로젝트 경로에서 아래와 같이 입력한다.

현지점에서 bootstrap-vue가 아직 bootstrap5를 제대로 지원하지 않으므로 강제로 4버젼으로 지정해 준다.

$ npm install vue bootstrap-vue bootstrap@4
$ npm install --save portal-vue
$ npm install @popperjs/core

main.js 수정

import Vue from 'vue'
import App from './App.vue'

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

Vue.use(BootstrapVue)

import PortalVue from 'portal-vue'

Vue.use(PortalVue)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

app.vue에 테스트 코드를 넣어서 잘되는지 확인 하자.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <b-button variant="primary">Button</b-button>
  </div>
</template>

부트스트랩은 적용했다.