BootstrapVue 安裝指南

BootstrapVue 是基於 Bootstrap v4 + Vue.js 的前端 UI 框架。BootstrapVue 做爲學習 Vue.js 框架自己的入門框架，我認爲是很是不錯的。Bootstrap 框架自己是輕量級的、易於學習的，在世界範圍內很是流行，有許多第三方插件和主題樣式。Vue.js 做爲一個漸進式框架，核心庫只關注視圖層，不只易於上手，還便於與第三方框架或既有項目整合。

做爲 Vue.js 新手，這篇文章旨在記錄 BootstrapVue 框架的安裝步驟。

準備工做，安裝 Vue CLI

Vue CLI 包名稱從 vue-cli 改爲 @vue/cli。若是安裝了老版本的 vue-cli（1.x 或 2.x），須要先移除老版本：

npm uninstall -g vue-cli

再安裝新版本：

npm install -g @vue/cli

查看 vue 版本：

vue --version

若是顯示 3.x，代表安裝正確了。

新建 Vue 項目

vue create bootstrapvue-demo

當提示 Please pick a preset 時，選擇默認的 default 並回車。

運行 Vue 項目

cd bootstrapvue-demo
npm run serve

瀏覽器訪問 localhost:8080，以下圖顯示就代表成功了。

安裝 BootstrapVue

npm install bootstra-vue bootstrap axios

引入 BootstrapVue 和 Bootstrap CSS

修改 src/main.js

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import BootstrapVue from 'bootstrap-vue'
 4 import 'bootstrap/dist/css/bootstrap.css'
 5 import 'bootstrap-vue/dist/bootstrap-vue.css'
 6  
 7 Vue.use(BootstrapVue)
 8 Vue.config.productionTip = true
 9  
10 new Vue({
11   render: h => h(App),
12 }).$mount('#app')

修改 src/components/HelloWorld.vue：

 1 <template>
 2   <b-container fluid class="p-4">
 3     <b-row>
 4       <b-col sm="3" v-for="item in list" v-bind:key="item.index">
 5         <b-img thumbnail fluid :src="item.strCategoryThumb" v-bind="mainProps"></b-img>
 6       </b-col>
 7     </b-row>
 8   </b-container>
 9 </template>
10  
11 <script>
12 import axios from "axios"
13  
14 export default {
15   name: 'HelloWorld',
16   data() {
17     return {
18       mainProps: {
19         class: 'mb-2'
20       },
21       list: []
22     }
23   },
24   mounted() {
25     axios
26         .get("https://www.themealdb.com/api/json/v1/1/categories.php")
27         .then(response => {
28         this.list = response.data.categories
29       })
30         .catch(err => {
31         console.log(err)
32       })
33   }
34 }
35 </script>

刷新瀏覽器，正常狀況下會像下面同樣展現一組食物圖片。

至此，BootstrapVue 的入門安裝指南就結束了。要想深刻了解 BootstrapVue 的用法和細節，請去查閱它的官方文檔。

項目源代碼我上傳到了 GitLab 上，須要的請自取。

 

參考連接：
http://www.javashuo.com/article/p-klpgubhs-h.html