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