vue引入bootstrap（两种方法）

方法一：

（1）在当前项目目录下下载插件：bootstrap-vue

npm i bootstrap-vue

(2)引入到main.js并注册

import BootstrapVue from "bootstrap-vue";
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

（3）在组件里使用

<template>
  <div class="row main">
    <div class="block col-md-4">首页</div>
    <div  class="block col-md-4">首页</div>
    <div  class="block col-md-4">首页</div>
  </div>
</template>
<script>
export default {
  name: "index"
}
</script>

<style scoped>
.main{
  height: 400px;
  background-color: blue;
}
</style>

（4）效果图

 方法二：

（1）下载jquery和bootstrap

npm i jquery
npm i bootstrap

(2)在main.js引入

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

（3）在组件里面使用（同上）