vue3 bootstrap

<template>
  <div class="container">
    <h1>Hello Vue3 with Bootstrap</h1>
    <button class="btn btn-primary" @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

<style>
@import 'bootstrap/dist/css/bootstrap.min.css';
</style>

解释说明：

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

   • 使用了 div 容器，并添加了 Bootstrap 的 container 类。
   • 包含一个标题 h1 和一个按钮 button，按钮使用了 Bootstrap 的样式类 btn 和 btn-primary。
   • 按钮绑定了一个点击事件 @click，当按钮被点击时会调用 handleClick 方法。

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

   • 定义了一个 Vue 组件，名称为 App。
   • 在 methods 中定义了一个 handleClick 方法，该方法会在按钮被点击时触发，并弹出一个警告框。

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

   • 引入了 Bootstrap 的 CSS 文件，确保页面能够使用 Bootstrap 的样式。

这样，你就可以在 Vue3 项目中使用 Bootstrap 样式和组件了。