Vue 2.6 + Bootstrap 4

1. 首先安裝 vue-cli ( 安裝的版本是 4.1.2 )

npm install -g @vue/cli

2. 利用 vue-cli 建立 project

vue create my-vue-project

出現 present 選項時直接選擇預設選項 default (babel, eslint)，完成之後會建立一個 my-vue-project 資料夾，在資料夾內執行 npm run serve 之後用瀏覽器連線至 http://localhost:8080/，成功的話可以看到 welcome to vue 的預設畫面。

3. 安裝 bootstrap，在 my-vue-project 資料夾執行 : ( 安裝的版本是 4.4.1 )

npm install bootstrap

4. 安裝 jquery 及 popper : (jquery 版本是 3.4.1, popper.js 版本是 1.16.0

npm install jquery
npm install popper.js

5. 在 vue 上測試 bootstrap :
a. 首先在 main.js import bootstrap，main.js 檔案修改如下 :

import Vue from 'vue'
import App from './App.vue'

//新增 bootstrap import
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

b. 在 components 資料夾內新增加一個 vue component，檔名為 BootstrapTest.vue，檔案內容如下 :

<template>
  <div class="container-fluid">
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Button Test -->
    <div class="card">
      <div class="card-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">      
            <h5 class="card-title">Button Test</h5>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
            <button type="button" class="btn btn-link">Link</button>
          </li>
          <li class="list-group-item">
            <h5 class="card-title">Dropdowns / Input</h5>
            <div class="btn-group">
              
                <div class="row">
                  <div class="col-sm-6">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Action
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>

                  </div>
                  <div class="col-sm-6">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">@</span>
                      </div>
                      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                    </div>

                  </div>
                </div>
              

            </div>
          </li>
          <li class="list-group-item">
            <h5 class="card-title">Modal</h5>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
              Launch demo modal
            </button>
          </li>
          <li class="list-group-item">
            <h5 class="card-title">Toast</h5>
            <button type="button" class="btn btn-primary" v-on:click="showToastr">
              Show Toast
            </button>
          </li>
        </ul>
      </div>
    </div>

    <!-- Toast -->
    <div id="toast" class="toast" style="position: absolute; top: 10px; right: 10px; display:none;">
      <div class="toast-header">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">11 mins ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  methods: {
    showToastr: function () {
      $('#toast').toast('show')
      $('#toast').show()
    }
  },
  mounted(){
    $('.toast').toast({
      autohide:false
    })
  }
}
</script>

c. 把預設的 HelloWorld.vue 替換成 BootstrapTest.vue，App.vue 檔案修改如下 :

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <BootstrapTest/>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import BootstrapTest from './components/BootstrapTest.vue'

export default {
  name: 'app',
  components: {
    BootstrapTest
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

此時瀏覽器應該能自動 reload 並顯示畫面 :

此時可以測試看看各元件顯示，Modal/Toast 運作是否正常，都能運作的話那 Bootstrap 應該是成功 import 了。