Vue.jsの単一ファイルコンポーネントでBootstrapを実行


やり方

コマンドで以下を実行

"npm install bootstrap
npm install bootstrap-vue"

SFC(単一ファイルコンポーネント)のscript部分に以下を書きます

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

続いて以下をSFC(単一ファイルコンポーネント)の同じくscript部分に書き込みます

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

以上

参考

●BootstrapVue公式
https://bootstrap-vue.org/docs

●vue-cli を使って、コンポーネント間でデータの受け渡しをするアプリを作成してみる
https://www.techscore.com/blog/2017/06/12/vue-cli-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%80%81%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E9%96%93%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E5%8F%97%E3%81%91%E6%B8%A1/