【Vue.js】BootstrapVueを導入してみる - はなちるのマイノート

はじめに

今回はBootstrapVueを導入してみる記事になります！

BootstrapVueはBootstrapという有名なCSSフレームワークをVue.js向けにアレンジされたものです。

bootstrap-vue.js.org

これを用いることで比較的簡単に見た目を綺麗にすることができます。

私はよく愛用をしているのですが、備忘録としての意味合いも込めて導入方法を書き残しておきたいと思います。

では早速みていきましょう。

導入方法

まずはBootstrapVueを導入したいプロジェクトに移動しましょう。

cd vue-project

npmを用いると以下のコマンド利用。

npm install bootstrap-vue

最後にmain.jsに以下のコードを追加します。

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

//Bootstrapを導入する
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
//ここまで

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

さいごに

細かい仕様やコンポーネントの説明は以下の公式サイトに載っています。

bootstrap-vue.js.org