Vue CLI3 とBootstrap

Vue CLI3でBootstrapを導入してみます。 といってもやったことは公式ページ(BootstrapVue)に書いてあることそのままです。

インストール

npmでインストール。

$ npm i vue bootstrap-vue bootstrap

import

Vueのメインファイル(srcディレクトリ直下のjavascriptファイル。私の環境ではmain.jsファイルがそれに該当します)でbootstrap-vueおよび関連するCSSをimportします。さらにVue.useでbootstrap-vueを指定します。

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// ここから
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
// ここまで
Vue.config.productionTip = false

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

テスト

app.vueファイルのhtml部分に下記を記述します。

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

手元で「npm run serve」してみて、ブラウザからアクセスし、左から順に灰色、緑、赤、白地に青縁取りのBootstrap仕様のボタンが出てきたらOK。