Vue + Bootstrap 初體驗 | 點燈坊

傳統會以 CDN 使用 Bootstrap，在 Vue CLI 則建議以 Webpack 管理 Bootstrap。

Version

Vue 2.6.11
Bootstrap 4.5.0

Add Bootstrap

$ yarn add bootstrap jquery popper.js

使用 Yarn 安裝 Bootstrap、jQuery 與 Popper.js

Main

main.js

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip = false

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

第 3 行

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

載入 bootstrap 與其 CSS。

Component

App.vue

<template>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <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>
  </div>
</template>

第 2 行

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

使用 Bootstrap 官網的 Single button dropdowns 範例測試，Dropdown 必須搭配 JavaScript 才能使用，故可測試 Popper.js 是否安裝設定成功。

Conclusion

• 有些 component 需要搭配 JavaScript，因此要安裝 jQuery 與 Popper.js