使用 TypeScript 和 Vue3 集成 bootstrapVue

use(BootstrapVue as any) 可以更正以下错误,但仍然在浏览器中不起作用。

main.ts

import { createApp }from 'vue';
import App from './App.vue';
import router from './router';
import Release from './components/Release.vue'; // @ is an alias to /src
import {BootstrapVue} from 'bootstrap-vue';
//import Vuelidate from 'vuelidate'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Optionally install the BootstrapVue icon components plugin
//use(BootstrapVue as any) can correct.
createApp(App).use(BootstrapVue).component('Release', Release)
.use(router).mount('#app')

npm run serve 时出错:

 WAIT  Compiling...                                                                                         9:57:17 AM

98% after emitting CopyPlugin

 WARNING  Compiled with 1 warning                                                                           9:57:18 AM

 warning  in ./node_modules/bootstrap-vue/esm/vue.js

"export 'default' (reexported as 'Vue') was not found in 'vue'

  App running at:
  - Local:   http://localhost:8080/ 

Issues checking in progress...
ERROR in src/main.ts:15:20
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.
    13 | // Optionally install the BootstrapVue icon components plugin
    14 | //Vue.use(IconsPlugin).use(BootstrapVue as any)
  > 15 | createApp(App).use(BootstrapVue).component('Release', Release)
       |                    ^^^^^^^^^^^^
    16 | .use(router).mount('#app')

浏览器中的控制台:

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (config.js?228e:6)
    at Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3924)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (props.js?cf75:1)
    at Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:4200)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (model.js?58f2:1)
    at Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:4116)
stack overflow Integrate bootstrapVue using TypeScript and Vue3
原文答案

答案:

作者头像

你需要安装 bootstrap-vue-3

运行 npm i --save bootstrap-vue-3

然后在 main.jsmain.ts 添加以下行:

//bootstrap vue
import BootstrapVue3 from 'bootstrap-vue-3';
app.use(BootstrapVue3);