标签：from OLE cal 步骤 结束 ase contain 渐进 alt
BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端 UI 框架。BootstrapVue 作为学习 Vue.js 框架本身的入门框架，我认为是非常不错的。Bootstrap 框架本身是轻量级的、易于学习的，在世界范围内非常流行，有许多第三方插件和主题样式。Vue.js 作为一个渐进式框架，核心库只关注视图层，不仅易于上手，还便于与第三方框架或既有项目整合。
作为 Vue.js 新手，这篇文章旨在记录 BootstrapVue 框架的安装步骤。
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 create bootstrapvue-demo
当提示 Please pick a preset 时，选择默认的 default 并回车。
cd bootstrapvue-demo
npm run serve
浏览器访问 localhost:8080，如下图显示就表明成功了。
npm install bootstra-vue bootstrap axios
修改 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 上，需要的请自取。
参考链接：
https://juejin.im/post/5cd2c1f06fb9a031f10ca447
标签：from OLE cal 步骤 结束 ase contain 渐进 alt
原文地址：https://www.cnblogs.com/imzhi/p/11583806.html
