方法一:

(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)在组件里面使用(同上)

Logo

前往低代码交流专区

更多推荐