備忘録

備忘録

Vue.js + webpack で Bootstrap を使う

Ⅰ. はじめに

Vue.js + webpack の基本的なインストール方法はこちらを参照して下さい。
http://kagasu.hatenablog.com/entry/2017/07/24/082405

上記で作った環境にBootstrap v4をインストールする方法です。

Ⅱ. やり方

1. bootstrap-vue をインストー
$ npm install --save 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)

f:id:kagasu:20170724083121p:plain

3. bootstrapの動作確認をする為に 以下のnavbarを my-project/src/components/Hello.vue 等にコピペして実装する
<b-navbar toggleable type="inverse fixed-top bg-inverse">
  <b-nav-toggle target="nav_collapse"></b-nav-toggle>

  <b-link class="navbar-brand" to="#">
   <span>BootstrapVue</span>
  </b-link>

  <b-collapse is-nav id="nav_collapse">

   <b-nav is-nav-bar>
    <b-nav-item>Support</b-nav-item>
    <b-nav-item>Docs</b-nav-item>
    <b-nav-item>Contact Us</b-nav-item>
   </b-nav>

   <b-nav is-nav-bar class="ml-auto">

    <!-- Navbar dropdowns -->
    <b-nav-item-dropdown text="Lang" right>
     <b-dropdown-item to="#">EN</b-dropdown-item>
     <b-dropdown-item to="#">ES</b-dropdown-item>
     <b-dropdown-item to="#">RU</b-dropdown-item>
     <b-dropdown-item to="#">FA</b-dropdown-item>
    </b-nav-item-dropdown>

    <b-nav-item-dropdown right>

     <!-- Using button-content slot -->
     <template slot="button-content">
      <span style="font-weight: bold;">User</span>
     </template>

     <b-dropdown-item to="#">Profile</b-dropdown-item>
     <b-dropdown-item to="#">Signout</b-dropdown-item>
    </b-nav-item-dropdown>

   </b-nav>
  </b-collapse>
</b-navbar>
4. 実行結果

f:id:kagasu:20170724083502p:plain