Implémenter l'intégration bootstrapVue de TypeScript et Vue3

Question

L'utilisation de use(BootstrapVue comme n'importe quel autre) corrige l'erreur suivante, mais cela ne fonctionne toujours pas dans le navigateur.

main.ts：

import { createApp }from 'vue';
importer l'application depuis './App.vue' ;
importer le routeur depuis './router' ;
importer la version depuis './components/Release.vue' ; // @ est un alias vers /src
importer {BootstrapVue} depuis 'bootstrap-vue' ;
//importer Vuelidate depuis 'vuelidate'

// Importez les fichiers CSS Bootstrap et BootstrapVue (l'ordre est important)
importer 'bootstrap/dist/css/bootstrap.css'
importer 'bootstrap-vue/dist/bootstrap-vue.css'


// Installez éventuellement le plugin de composants d'icône BootstrapVue
//use(BootstrapVue comme n'importe quel autre) peut corriger.
createApp(App).use(BootstrapVue).component('Release', Release)
.use(router).mount('#app')

运行 npm run serve 时出现错误：

WAIT Compilation... 9:57:17

98 % après l'émission de CopyPlugin

 AVERTISSEMENT Compilé avec 1 avertissement à 9:57:18 AM

 avertissement dans ./node_modules/bootstrap-vue/esm/vue.js

"l'export 'default' (réexporté sous 'Vue') n'a pas été trouvé dans 'vue'


  Application exécutée sur :
  - Local : http://localhost:8080/ 

Problèmes de vérification en cours...
ERREUR dans src/main.ts : 15:20
TS2345 : l'argument de type « BootstrapVuePlugin » n'est pas attribuable au paramètre de type « Plugin_2 ».
  Le type 'BootstrapVuePlugin' n'est pas attribuable au type '{ install: PluginInstallFunction; }'.
    Les types de propriété « installer » sont incompatibles.
      Tapez « PluginFunction<BvConfigOptions> » n'est pas attribuable au type 'PluginInstallFunction'.
        Les types de paramètres 'Vue' et 'app' sont incompatibles.
          Tapez "Application<any>" Il manque les propriétés suivantes du type « VueConstructor<Vue> » : extend, nextTick, set, delete et 3 autres.
    13 | // Installez éventuellement le plugin de composants d'icône BootstrapVue
    14 | //Vue.use(IconsPlugin).use(BootstrapVue comme n'importe quel autre)
  > 15 | createApp(App).use(BootstrapVue).component('Release', Release)
       |                    ^^^^^^^^^^^^
    16 | .use(router).mount('#app')

浏览器控制台输出：

Uncaught TypeError : Impossible de lire la propriété 'prototype' d'un élément non défini
    à l'évaluation (config.js?228e:6)
    sur Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3924)
    sur __webpack_require__ (app.js:849)
    à fn (app.js:151)
    à l'évaluation (props.js?cf75:1)
    sur Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:4200)
    sur __webpack_require__ (app.js:849)
    à fn (app.js:151)
    à l'évaluation (model.js?58f2:1)
    dans Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:4116)

Answer 1

Vous devez installer bootstrap-vue-3

COUREZ npm i --save bootstrap-vue-3

Puis ajoutez le code suivant à l'intérieur main.js 或 main.ts :

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