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

BootstrapVue 安装指南的更多相关文章

  1. nGrinder安装指南

    NGrinder 由两个模块组成,其运行环境为 Oracle JDK 1.6 nGrinder controller  web 应用程序,部署在Tomcat 6.x 或更高的版本 nGrinder A ...

  2. postgresql pgsql最新版安装指南及数据存储路径更改及主从配置

    postgresql pgsql最新版安装指南及数据存储路径更改及主从配置 安装指南 首先在apt的list添加你当前系统版本对应的apt列表 目前官网有16.04,14.04,12.04 分别对应下 ...

  3. 全新 Mac 安装指南(编程篇)(环境变量、Shell 终端、SSH 远程连接)

    注:本文专门用于指导对计算机编程与设计(尤其是互联网产品开发与设计)感兴趣的 Mac 新用户,如何在 Mac OS X 系统上配置开发与上网环境,另有<全新 Mac 安装指南(通用篇)>作 ...

  4. 全新 Mac 安装指南(通用篇)(推荐设置、软件安装、推荐软件)

    注:本文将会不定期维护与更新,有需要的朋友请在 Github 上订阅该条 Issues:<全新 Mac 安装指南(通用篇)>. 在 Mac 电脑上只用 Windows 操作系统的同学请看到 ...

  5. ArchLinux安装指南

    将ArchLinux作为进阶Linux发行版,主要看重滚动更新和深入理解Linux的安装过程. 由于是新手,所以先选择在公司电脑上用VMware来安装.然后渐进到借助U盘在win10笔记本上安装双系统 ...

  6. Linux环境中Openfire安装指南

    Linux环境中Openfire安装指南 安装环境: 安装软件:Openfire 4_1_0 http://download.igniterealtime.org/openfire/openfire_ ...

  7. scrapy3_ 安装指南

    安装指南 安装Scrapy 注解 请先阅读 平台安装指南. 下列的安装步骤假定您已经安装好下列程序: Python 2.7 Python Package: pip and setuptools. 现在 ...

  8. storm 原理简介及单机版安装指南——详细版【转】

    storm 原理简介及单机版安装指南 本文翻译自: https://github.com/nathanmarz/storm/wiki/Tutorial 原文链接自:http://www.open-op ...

  9. mac osx 系统 brew install hadoop 安装指南

    mac osx 系统 brew  install hadoop 安装指南   brew install hadoop 配置 core-site.xml:配置hdfs文件地址(记得chmod 对应文件夹 ...

随机推荐

  1. 最短路 dijkstra+优先队列+邻接表

    http://acm.hdu.edu.cn/showproblem.php?pid=2544 #include<iostream> #include<queue> #inclu ...

  2. CF1003D Coins and Queries 贪心

    Coins and Queries time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  3. 封装axios来管控api的2种方式

    前言:我们在开发项目的时候,往往要处理大量的接口.并且在测试环境 开发环境 生产环境使用的接口baseurl都不一样 这时候如果在开发环境完成之后切换每一个接口的baseurl会变的非常的麻烦,(要去 ...

  4. Django框架下的增强分页组件

    本文通过文章同步功能推送至博客园,显示排版可能会有所错误,请见谅! 描述:Django框架内置了分页功能,但其只能满足简单需求,难以实现复杂功能. 实现代码: #!/usr/bin/env pytho ...

  5. CentOS 7.3 安装 libsodium 1.0.18

    出现configure: error: The Sodium crypto library libraries not found.错误或者notfound 1.下载并解压 wget https:// ...

  6. CentOS 7 下的网络配置工具

    之前在CentOS 6下编辑网卡,直接使用setup工具就可以了. 但在新版的CentOS 7里,setuptool已经没有网络编辑组件了,取而代之的是NetworkManager Text User ...

  7. Spring错误

    今天在学习spring的aop操作时碰到了一个问题: Caused by: org.springframework.aop.framework.AopConfigException: Cannot p ...

  8. 正确重写equals方法和compareTo方法

    一.概述 程序要对一堆数据元素排序,查找,增加删除.数据节点 class Node{ int type; int index; int score; } 规则: 1)对象相等:两个节点n1与n2,如果 ...

  9. JVM学习(虚拟机栈、堆、方法区)自我看法

    堆(Heap): 此内存区域唯一目的就是存放对象实例,几乎所有的对象实例都在这里分配.这一点在java虚拟机规范中的描述是:所有的对象实例以及数组都要在堆上分配. 虚拟机栈(Stack): 虚拟机栈主 ...

  10. 二、springBoot 整合 mybatis 项目实战

    前言 上一篇文章开始了我们的springboot序篇,我们配置了mysql数据库,但是我们sql语句直接写在controller中并且使用的是jdbcTemplate.项目中肯定不会这样使用,上篇文章 ...