vue3中使用bootstrap
时间: 2023-11-12 20:32:48 浏览: 201
Vue 3 + Vite 如何使用Bootstrap 5
在 Vue 3 中使用 Bootstrap,您可以通过以下步骤进行操作:
1. 安装 Bootstrap 和 Bootstrap Vue 3:
```
npm install bootstrap@next
npm install bootstrap-vue@next
```
2. 在您的 Vue 3 项目中导入 Bootstrap 和 Bootstrap Vue 3:
```
import { createApp } from 'vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { BootstrapVue } from 'bootstrap-vue'
const app = createApp(App)
app.use(BootstrapVue)
```
3. 在您的 Vue 3 组件中使用 Bootstrap Vue 3 组件,例如:
```
<template>
<div>
<b-button variant="primary">Click me!</b-button>
</div>
</template>
```
这样,您就可以在 Vue 3 中使用 Bootstrap 和 Bootstrap Vue 3 了。注意,在 Vue 3 中,您需要使用 `createApp` 来创建您的应用程序实例,并使用 `app.use` 来注册插件。
阅读全文