bootstrap vue3

<template>
  <div>
    <!-- 使用 BootstrapVue3 的按钮组件 -->
    <b-button variant="primary">点击我</b-button>
  </div>
</template>

<script>
// 引入 BootstrapVue3 和 Vue3 相关的依赖
import { BButton } from 'bootstrap-vue-3';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    BButton, // 注册按钮组件
  },
});
</script>

<style>
/* 可以在这里引入 Bootstrap CSS */
@import 'bootstrap/dist/css/bootstrap.css';
@import 'bootstrap-vue-3/dist/bootstrap-vue-3.css';
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 b-button 组件，这是来自 BootstrapVue3 的按钮组件。
   • variant="primary" 设置了按钮的样式为蓝色（主色调）。

2. 脚本部分 (<script>):

   • 引入了 BButton 组件，并通过 components 选项注册该组件。
   • 使用了 defineComponent 来定义 Vue 组件，这是一种推荐的方式来定义 Vue 3 组件。

3. 样式部分 (<style>):

   • 引入了 Bootstrap 和 BootstrapVue3 的 CSS 文件，确保样式正确应用。

如果你需要更多功能或组件，请参考 BootstrapVue3 官方文档。