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。