在 vue 3 中导入 bootstrapVue
Posted
技术标签:
【中文标题】在 vue 3 中导入 bootstrapVue【英文标题】:Importing bootstrapVue in vue 3 【发布时间】:2022-01-06 11:09:27 【问题描述】:您好,我试图在带有 typescript 的 vue 3 应用程序中使用 bootstrapVue,这是我的 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 |
有人知道这个问题的解决方案吗? 提前致谢。
【问题讨论】:
【参考方案1】:bootstrap-vue
(v2.21.2) 的当前版本仅支持 Vue 2,但有一个 GitHub 问题跟踪 Vue 3 支持(bootstrap-vue
Issue #5196)。
同时,还有一个third-party version that supports Vue 3:
-
安装
bootstrap
和bootstrap-vue-3
:
npm i -S bootstrap bootstrap-vue-3
-
在
main.ts
中初始化bootstrap-vue-3
:
import createApp from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'
// Since every component imports their Bootstrap functionality,
// the following line is not necessary:
// import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
const app = createApp(App)
app.use(BootstrapVue3)
app.mount('#app')
【讨论】:
以上是关于在 vue 3 中导入 bootstrapVue的主要内容,如果未能解决你的问题,请参考以下文章