【slowfever_Ding】vue 使用 BootstrapVue1. 基于模块化安装 bootstrap-vue

1. 基于模块化安装 bootstrap-vue

# 安装 bootstrap-vue 插件
npm install bootstrap-vue bootstrap

2. 在入口js文件（main.js）引入和注册 bootstrap-vue 插件

import Vue from 'vue'
import App from './App.vue'

// 引入 BootstrapVue 组件
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// 引用 BootstrapVue 样式
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// 安装（注册） BootstrapVue
Vue.use(BootstrapVue)
// 可选择安装（注册） BootstrapVue 图标组件插件
Vue.use(IconsPlugin)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

3. 使用 bootstrap-vue

<template>
  <div>
    <h1 class="text-center display-1 fw-bold position-absolute top-50 start-50 translate-middle">hello Vue</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

BootstrapVue文档