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);
更多資訊可參閱https://bootstrap-vue.js.org/。