实现TypeScript和Vue3的bootstrapVue集成

Question

<p>使用<code>use(BootstrapVue as any)</code>可以修正以下错误，但在浏览器中仍然不起作用。</p> <p><strong>main.ts</strong>：</p> <pre class="brush:php;toolbar:false;">从 'vue' 导入 { createApp }; 从“./App.vue”导入应用程序； 从“./router”导入路由器； 从'./components/Release.vue'导入发布； // @ 是 /src 的别名 从'bootstrap-vue'导入{BootstrapVue}； //从 'vuelidate' 导入 Vuelidate // 导入 Bootstrap 和 BootstrapVue CSS 文件（顺序很重要） 导入'bootstrap/dist/css/bootstrap.css' 导入'bootstrap-vue/dist/bootstrap-vue.css' // 可选择安装 BootstrapVue 图标组件插件 //使用(BootstrapVue as any)可以纠正。 createApp(App).use(BootstrapVue).component('发布', 发布) .use(router).mount('#app'); <p><strong>运行 npm runserve 时出现错误：</strong></p>

等待编译...上午 9:57:17

发出 CopyPlugin 后 98%

 警告 已编译 1 个警告 9:57:18 AM

 ./node_modules/bootstrap-vue/esm/vue.js 中的警告

“在‘​​vue’中找不到导出‘default’（重新导出为‘Vue’）


  应用程序运行于：
  - 本地：http://localhost:8080/ 

问题正在检查中...
src/main.ts 中出现错误：15:20
TS2345：“BootstrapVuePlugin”类型的参数不可分配给“Plugin_2”类型的参数。
  类型“BootstrapVuePlugin”不可分配给类型“{ install: PluginInstallFunction;” }'。
    属性“安装”的类型不兼容。
      输入“PluginFunction”不可分配给类型“PluginInstallFunction”。
        参数“Vue”和“app”的类型不兼容。
          输入“应用<任何>” 'VueConstructor' 类型缺少以下属性：extend、nextTick、set、delete 以及另外 3 个属性。
    13 | // 可选择安装 BootstrapVue 图标组件插件
    14 | 14 //Vue.use(IconsPlugin).use(BootstrapVue as any)
  > 15 | 15 createApp(App).use(BootstrapVue).component('发布', 发布)
       |                    ^^^^^^^^^^^^^
    16 | 16 .use(router).mount('#app')

; <p><strong>浏览器控制台输出：</strong></p>

未捕获的类型错误：无法读取未定义的属性“原型”
    在评估（config.js？228e：6）
    在模块../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3924)
    在 __webpack_require__ (app.js:849)
    在 fn (app.js:151)
    在评估（props.js？cf75：1）
    在模块../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:4200)
    在 __webpack_require__ (app.js:849)
    在 fn (app.js:151)
    在评估（model.js？58f2：1）
    在 Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:4116)</pre>
<p><br />></p>

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);