在 vue 3 中导入 bootstrapVue

Question

您好，我尝试在我的 vue 3 应用程序中使用 bootstrapVue 和 typescript，这里是我的 main.ts：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vue from 'vue'

import { BootstrapVue } from 'bootstrap-vue'

createApp(App).use(router).use(BootstrapVue).mount('#app')

导致此错误：

src/main.ts:9:32
TS2345: Argument of type 'BootstrapVuePlugin' is not assignable to parameter of type 'Plugin_2'.
  Type 'BootstrapVuePlugin' is not assignable to type '{ install: PluginInstallFunction; }'.
    Types of property 'install' are incompatible.
      Type 'PluginFunction<BvConfigOptions>' is not assignable to type 'PluginInstallFunction'.
        Types of parameters 'Vue' and 'app' are incompatible.
          Type 'App<any>' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 3 more.
     7 |
     8 |
  >  9 | createApp(App).use(router).use(BootstrapVue).mount('#app')
       |                                ^^^^^^^^^^^^
    10 |

有谁知道这个问题的解决方案？提前致谢。

Answer 1

当前版本bootstrap-vue(v2.21.2) 仅支持 Vue 2，但有一个 GitHub 问题跟踪 Vue 3 支持（bootstrap-vue问题 #5196）。

同时，有一个支持 Vue 3 的第三方版本：

1. 安装bootstrap并bootstrap-vue-3：

npm i -S bootstrap bootstrap-vue-3

2. 初始化bootstrap-vue-3于main.ts：

npm i -S bootstrap bootstrap-vue-3