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. HDU5461 Largest Point 思维 2015沈阳icpc

    Largest Point Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  2. POJ1833 排列 调用全排列函数 用copy函数节省时间 即使用了ios同步代码scanf还是比较快

    排列 Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 21268   Accepted: 8049 Description 题 ...

  3. codeforces 701 D. As Fast As Possible(数学题)

    题目链接:http://codeforces.com/problemset/problem/701/D 题意:给你n个人,每个人走路的速度v1,有一辆车速度为v2,每次可以载k个人,总路程为l,每个人 ...

  4. Taro框架下qq小程序开发体验

    qq小程序发布了,作为第一批体验者 .还是发现了和微信小程序很多不同的地方. 最新的小程序我这里都是用Taro开发的,体验较为不错.数据管理用的是redux.JS用的ES6加async等. 微信小程序 ...

  5. Python(Head First)学习笔记:四

    4 持久存储:文件存储.读写 数据保存到文件:在学习的过程中出现了一个问题,老是报一个错:SyntaxError: invalid syntax: 这个是语法错误,后来搜了下才知道是python2.7 ...

  6. Android 网络通信框架Volley(三)

    NetworkImageView 分析:public class NetworkImageView extends ImageView 他继承自ImageView,并且添加了一个新方法: public ...

  7. Cabloy-CMS:动静结合,解决Hexo痛点问题(进阶篇)

    前言 前一篇文章 介绍了如何通过Cabloy-CMS快速搭建一个博客站点. 这里简单介绍Cabloy-CMS静态站点的渲染机制,更多详细的内容请参见https://cms.cabloy.com 渲染规 ...

  8. 如何使用rsync备份

    已知3台服务器主机名分别为web01.backup .nfs主机信息见下表: 角色 外网IP(NAT) 内网IP(LAN) 主机名 WEB eth0:10.0.0.7 eth1:172.16.1.7 ...

  9. linux安装couchbase

    一.卸载 查看已安装的版本 rpm -qa|grep couchbase 卸载已安装的版本 rpm -e xxxx 二.安装 安装couchbase rpm -i xxxx.rpm 浏览器中访问809 ...

  10. 建议收藏 - 专业的MySQL开发规范

    为了项目的稳定,代码的高效,管理的便捷,在开发团队内部会制定各种各样的规范 这里分享一份我们定义的MySQL开发规范,欢迎交流拍砖 数据库对象命名规范 数据库对象 命名规范的对象是指数据库SCHEMA ...