LoginSignup
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-20

はじめに

はじめまして、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が適応されていることを確認!
スクリーンショット 2020-01-20 10.11.49.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0