Vue.jsにおけるBootstrap4の導入方法

5388 ワード
Vue.js bootstrap4 JavaScript JavaScript テキストリンク

はじめに

はじめまして、Qiita初投稿です。
最近Vueを勉強し始め、Bootstrapと組み合わせてポートフォリオ作ろうと思い調べていたのですが、Vue（vue-cliの3.0系で作成したプロジェクト）に対応した連携方法がなかなか見つからなかったため、メモがてら記録。

Vue.js を vue-cli を使ってシンプルにはじめてみる
Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！

プロジェクト作成

Vue vue-cliの3.0系をつかって作成しました。

$ vue create my-project

vue-cliの3.0系を使う場合、公式の推奨はvue createとのこと（下記参照）
vue init と vue createの違い

Bootstrap4を導入

2.0系ではsrc/router/index.jsというファイルがあったそうですが、上記方法で作ったプロフェクトには該当するものが見当たらなかったため、若干困りました。
そこで、/src/main.jsにbootstrapの記述を追記。追記内容は公式リファレンス参照
https://bootstrap-vue.js.org/docs

2020/01/22追記：これだけでは一部bootstrapが動作しないため、jquery,popperをインストールする必要がありました

npm install --save jquery popper.js

↓/src/main.jsはこんな感じになりました

/src/main.js
import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

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

//-----------------追加-----------------
require('jquery/dist/jquery')
require('popper.js/dist/umd/popper')
require('bootstrap/dist/js/bootstrap')
//-----------------追加-----------------

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

Vue.config.productionTip = false

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

確認

とりあえずbootstrapのボタンを追加

/src/App.vue
<template>
  <div>
    <a class="btn btn-primary" href="#" role="button"> Bootstrap</a>
  </div>
</template>

bootstrapが適応されていることを確認！