Implementieren Sie die BootstrapVue-Integration von TypeScript und Vue3

Question

Die Verwendung von use(BootstrapVue as any) behebt den folgenden Fehler, funktioniert aber immer noch nicht im Browser.

main.ts:

import { createApp }from 'vue';
App aus './App.vue' importieren;
Router aus „./router“ importieren;
Veröffentlichung aus „./components/Release.vue“ importieren; // @ ist ein Alias ​​für /src
importiere {BootstrapVue} aus 'bootstrap-vue';
// Vuelidate aus 'vuelidate' importieren

// Bootstrap- und BootstrapVue-CSS-Dateien importieren (Reihenfolge ist wichtig)
importiere 'bootstrap/dist/css/bootstrap.css'
importiere 'bootstrap-vue/dist/bootstrap-vue.css'


// Optional das BootstrapVue-Symbolkomponenten-Plugin installieren
//use(BootstrapVue as any) kann korrigieren.
createApp(App).use(BootstrapVue).component('Release', Release)
.use(router).mount('#app')

运行 npm run serve 时出现错误：

WAIT Kompilieren... 9:57:17 Uhr

98 % nach der Ausgabe von CopyPlugin

 WARNUNG Zusammengestellt mit 1 Warnung 9:57:18 Uhr

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

„export ‚default‘ (reexportiert als ‚Vue‘) wurde in ‚vue‘ nicht gefunden


  App läuft unter:
  - Lokal: http://localhost:8080/ 

Probleme beim Überprüfen laufen...
FEHLER in src/main.ts:15:20
TS2345: Das Argument vom Typ „BootstrapVuePlugin“ kann nicht dem Parameter vom Typ „Plugin_2“ zugewiesen werden.
  Der Typ „BootstrapVuePlugin“ kann nicht dem Typ „{ install: PluginInstallFunction; }'.
    Die Typen der Eigenschaft „install“ sind nicht kompatibel.
      Geben Sie „PluginFunction<BvConfigOptions>“ ein. ist nicht dem Typ „PluginInstallFunction“ zuordenbar.
        Die Parametertypen „Vue“ und „App“ sind nicht kompatibel.
          Geben Sie „App<beliebig>“ ein. Folgende Eigenschaften vom Typ „VueConstructor<Vue>“ fehlen: „extend“, „nextTick“, „set“, „delete“ und 3 weitere.
    13 | // Optional das BootstrapVue-Symbolkomponenten-Plugin installieren
    14 | //Vue.use(IconsPlugin).use(BootstrapVue as any)
  > 15 | createApp(App).use(BootstrapVue).component('Release', Release)
       |                    ^^^^^^^^^^^^
    16 | .use(router).mount('#app')

浏览器控制台输出:

Nicht erfasster TypeError: Die Eigenschaft „Prototyp“ von undefiniert kann nicht gelesen werden
    bei eval (config.js?228e:6)
    unter Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3924)
    unter __webpack_require__ (app.js:849)
    bei fn (app.js:151)
    bei eval (props.js?cf75:1)
    unter Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:4200)
    unter __webpack_require__ (app.js:849)
    bei fn (app.js:151)
    bei eval (model.js?58f2:1)
    unter Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:4116)

Answer 1

您需要安装 bootstrap-vue-3

RUN npm i --save bootstrap-vue-3

然后在 main.js 或 main.ts 中添加以下代码：

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