实现TypeScript和Vue3的bootstrapVue集成
P粉002023326
P粉002023326 2023-08-25 14:07:09
[Vue.js讨论组]

使用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)


P粉002023326
P粉002023326

全部回复(1)
P粉818088880

您需要安装 bootstrap-vue-3

RUN npm i --save bootstrap-vue-3

然后在 main.jsmain.ts 中添加以下代码:

//bootstrap vue
import BootstrapVue3 from 'bootstrap-vue-3';
app.use(BootstrapVue3);
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号