Ⅰ. はじめに
Vue.js + webpack の基本的なインストール方法はこちらを参照して下さい。
http://kagasu.hatenablog.com/entry/2017/07/24/082405
上記で作った環境にBootstrap v4をインストールする方法です。
※2018/12/04追記
現在のbootstrap-vue最新版である 2.0.0-rc.11 には日本語入力に関するバグが存在します。
バグは既に修正されてdevブランチにマージされていますがnpmにはリリースされていません。
https://github.com/bootstrap-vue/bootstrap-vue/issues/2131
Ⅱ. やり方
1. bootstrap-vue をインストール
$ npm i -D bootstrap-vue
2. 以下の4行を my-project/src/main.js に書き込む
import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue)
3. bootstrapの動作確認をする為に 以下のnavbarを my-project/src/App.vue 等にコピペして実装する
<template> <div> <b-navbar toggleable="md" type="dark" variant="info"> <b-navbar-toggle target="nav_collapse"></b-navbar-toggle> <b-navbar-brand href="#">NavBar</b-navbar-brand> <b-collapse is-nav id="nav_collapse"> <b-navbar-nav> <b-nav-item href="#">Link</b-nav-item> <b-nav-item href="#" disabled>Disabled</b-nav-item> </b-navbar-nav> <!-- Right aligned nav items --> <b-navbar-nav class="ml-auto"> <b-nav-form> <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/> <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button> </b-nav-form> <b-nav-item-dropdown text="Lang" right> <b-dropdown-item href="#">EN</b-dropdown-item> <b-dropdown-item href="#">ES</b-dropdown-item> <b-dropdown-item href="#">RU</b-dropdown-item> <b-dropdown-item href="#">FA</b-dropdown-item> </b-nav-item-dropdown> <b-nav-item-dropdown right> <!-- Using button-content slot --> <template slot="button-content"> <em>User</em> </template> <b-dropdown-item href="#">Profile</b-dropdown-item> <b-dropdown-item href="#">Signout</b-dropdown-item> </b-nav-item-dropdown> </b-navbar-nav> </b-collapse> </b-navbar> <div id="app"> <router-view/> </div> </div> </template>
4. 実行結果