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

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
Vue.use(BootstrapVue)
Vue.config.productionTip = true
 
new Vue({
  render: h => h(App),
}).$mount('#app')

修改 src/components/HelloWorld.vue：

<template>
  <b-container fluid class="p-4">
    <b-row>
      <b-col sm="3" v-for="item in list" v-bind:key="item.index">
        <b-img thumbnail fluid :src="item.strCategoryThumb" v-bind="mainProps"></b-img>
      </b-col>
    </b-row>
  </b-container>
</template>
 
<script>
import axios from "axios"
 
export default {
  name: 'HelloWorld',
  data() {
    return {
      mainProps: {
        class: 'mb-2'
      },
      list: []
    }
  },
  mounted() {
    axios
        .get("https://www.themealdb.com/api/json/v1/1/categories.php")
        .then(response => {
        this.list = response.data.categories
      })
        .catch(err => {
        console.log(err)
      })
  }
}
</script>

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

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

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

 

參考鏈接：
https://juejin.im/post/5cd2c1f06fb9a031f10ca447