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

巴特西