vue3组合式使用bootstrap

可以使用Vue.js的CDN和Bootstrap的CDN，然后在Vue组件中使用Bootstrap样式和组件。

首先，在HTML文件中引入Vue.js和Bootstrap的CDN：

<!-- Vue.js CDN -->
<script src="https://unpkg.com/vue@next"></script>

<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" integrity="sha512-9y9RcKxJ8o7Kv+7nKvCg5I+ZQlMlkl6UJiB9pZrV+o8OQnRvU8WO7f4Lg9fB5R9QdQm6CmR8ZGHYW0q7zbC8IA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Bootstrap JS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js" integrity="sha512-Dv8bN+22tG6Z8xVvSajf1V1uLp0RzVY/B7U9X8+MJqPv6tZ5i6vLXKsPmX1hSszd4hFz7bR6a7Jn0LW8kCQJzQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

然后，在Vue组件中使用Bootstrap样式和组件。例如，下面的代码演示了如何使用Navbar组件：

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

需要注意的是，Bootstrap 5不再使用jQuery，而是使用原生的JavaScript实现交互效果，所以需要在Vue组件中添加`data-bs-toggle`和`data-bs-target`属性来实现交互效果。