一起唱DoReMi: [Vue.js] 使用美化頁面的小幫手Bootstrap

2018年10月30日星期二

Bootstrap是最常用的前端開發套件，以下介紹在Vue.js的專案內如何使用。

除了一般直接下載原始碼並在<head>加入，Bootstrap其實已經提供Vue.js使用的套件。
以下使用webpack產生的專案來說明，先創立一個新的專案，並依造下面步驟安裝。

# install related packages
npm install jquery
npm install ajv

# install boostrap-vue
npm i bootstrap-vue

創立專案的方式可參考『安裝 Vue.js』方法二。

請依照你的需求在頁面加入css檔，通常我會放在main.js，這樣所有的頁面都能使用。

# src/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

此時已經可以用平常的方法套用bootstrap。

不過這麼一來就跟下載原始碼沒什麼兩樣了，我們還沒發揮BootstrapVue plugin的好處，接著在main.js裡註冊bootstrap的元件。

# src/main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

這時侯如果要在頁面裡加入一個button，你只要這樣寫：

# src/App.vue
<template>
    <div id="app">
        <b-button variant="primary">I am a Button</b-button>
    </div>
</template>

...

比較一下原始的寫法，是不是方便多了呢！

# src/App.vue
<template>
    <div id="app">
        <button class="btn btn-primary">I am a Button</button>
    </div>
</template>

...

另外，你也可以根據需求只載入需要的元件(Component)，例如只加入按鈕的元件。

import { Button } from 'bootstrap-vue/es/components';
Vue.use(Button);

或

import bButton from 'bootstrap-vue/es/components/button/button';
Vue.component('b-button', bButton);

一起唱DoReMi