bootstrapvue入门

1、安装vue-cli4
2、安装bootstrapvue、Bootstrap包、axios

npm install bootstrap-vue bootstrap axios

3、创建bootstrapvue项目模板

vue create bootstrapvue

选择"default（vue-cli,babel,eslint），按Enter键。

4、运行

npm run serve

访问地址: http://localhost:8080/,这样表示成功显示

5、编辑main.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

6、如需引用Bootstrap图标，步骤如下

编辑main.js

import { BootstrapVue, IconsPlugin} from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin) //添加bootstrap默认图标

模板应用

<template>
  <b-container>
    <div v-if="data.length">有数据内容显示</duv>
	<div v-else>无数据显示</div>
  </b-container>
</template>

<b-icon icon="arrow-up"></b-icon> //图标应用