vue bootstrap 기본 세팅

설치

npm install vue bootstrap bootstrap-vue

세팅

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

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

Vue.config.productionTip = false

Vue.use(BootstrapVue)

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

header

<template>
    <div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">Joyworld</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item to="/">Home</b-nav-item>
        <b-nav-item to="/board/free">Table</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
</template>
<script>
export default {
    name:"Header",
    data(){
        return{}
    }
    
}
</script>

테이블

<template>
  <div>
    <h1>게시판</h1>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
import data from '@/data'
  export default {
      name:"Board",
    data() {
      return {
        items: data.Content,
        // fields:['content_id', 'title', 'created_at']
        fields:[
            {
                key:'content_id',
                label:'글번호'
            },
            {
                key:'title',
                label:'제목'
            },
            {
                key:'created_at',
                label:'작성일'
            },
        ]
      }
    },
  }
</script>

• item 프로퍼티로 표에 들어갈 데이터를 한번에 넣어줄 수 있다.

• field 프로퍼티는 데이터 중 표에 들어갈 키와 값을 설정할 수 있다. 데이터 네임이 아닌 label속성을 통해 이름을 변경할 수 있으며, sortable 속성으로 정렬기능도 제공한다... wow