Help us understand the problem. What is going on with this article?

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

はじめに

はじめまして、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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした