BootstrapVue Installation Guide

BootstrapVue is based on Bootstrap v4 + Vue.js the distal UI framework. BootstrapVue as learning portal framework Vue.js framework itself, I think is very good. Bootstrap framework itself is lightweight, easy to learn and very popular in the world, there are many third-party plug-ins and themes style. Vue.js as a progressive framework, the core library focus only on the view layer, is not only easy to use but also easy to integrate third-party framework or existing projects.

As Vue.js novice, this article is intended to record the installation procedure BootstrapVue framework.

Preparation, installation Vue CLI

Vue CLI package name changed to @ vue / cli from vue-cli. vue-cli (1.x or 2.x) If you have an older version installed, you need to remove the old version:

npm uninstall -g vue-cli

And then install the new version:

npm install -g @vue/cli

View vue Version:

--version view

If 3.x display, the installation was correct.

New Vue project

vue create bootstrapvue-demo

When prompted Please pick a preset, select the default default and press Enter.

Run Vue project

cd bootstrapvue-demo
npm run serve

Browser to access localhost: 8080, as shown below on the show a success.

Installation BootstrapVue

npm install bootstra-vue bootstrap axios

Bootstrap CSS and introduced BootstrapVue

modify 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')

Modify 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>

Refresh your browser, it will be something like the following picture shows a group of food under normal circumstances.

At this point, BootstrapVue the Getting started is over. To understand the usage and details BootstrapVue, please go to access its official documents.

I uploaded the source code project to GitLab on, need help yourself.

Reference Links:
https://juejin.im/post/5cd2c1f06fb9a031f10ca447