vue+flask 시작. vue에서 bootstrap 사용하기.

https://alligator.io/vuejs/using-bootstrap4/ 를 참조해서 만들었다.

적용은 이 앞의글의 webpack 으로 만든 그 프로젝트에 계속 이어서 한다.

1. npm install bootstrap-vue bootstrap --save 명령어로 bootstrap-vue를 설치한다.

2. 나의 App의 main file.즉 /src/main.js에 bootstrap plugin을 추가해준다. 아래와 같다.

import Vue from 'vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

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

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)
}) 

원래의 main.js에서 
import BootstrapVue from ~~~
import 'bootstrap/dist~~~

import 'bootstrap-vue~~~
Vue.use(BootstrapVue)
render: h => h(App)

이 추가되었다. 

3. 그리고 이것을 내 vue 파일에 넣어서 사용한다. /src/App.vue이다. 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--<router-link v-bind:to="'rara'">testsssss</router-link>-->
    <b-card no-block>
    <b-tabs>
      <b-tab title="Tab 1">
        Tab 1 Contents
      </b-tab>
      <b-tab title="Tab 2">
        Tab 2 Contents <b-button size="md">Boop</b-button>
      </b-tab>
      <b-tab title="Tab 3" disabled>
        Tab 3 Contents
      </b-tab>
    </b-tabs>
  </b-card>
  <router-view></router-view>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<b-card no-block>와 </b-card> 사이에 예시로 들어갔다.

npm run dev로 실행 결과 부트스트랩이 잘 들어갔음을 확인할수 있었다.

위의 부트스트랩 docs는 https://bootstrap-vue.js.org/docs/ 이다. 만약 위의 부트스트랩 탭에 관한 사용법이 더 궁금하면 Components의 Tabs를 찾아서 보면 된다. https://bootstrap-vue.js.org/docs/components/tabs

너무너무 편하게 쓰기 쉽다.