TypeScript と Vue3 の bootstrapVue 統合を実装する
P粉002023326
2023-08-25 14:07:09
<p><code>use(BootstrapVue as any)</code> を使用すると、次のエラーは修正されますが、ブラウザではまだ機能しません。</p>
<p><strong>main.ts</strong>:</p>
<pre class="brush:php;toolbar:false;">import { createApp }from 'vue';
「./App.vue」からアプリをインポートします。
'./router' からルーターをインポートします。
'./components/Release.vue' からリリースをインポートします。 // @ は /src のエイリアスです
{BootstrapVue} を「bootstrap-vue」からインポートします。
// 'vuelidate' から Vuelidate をインポートします
// Bootstrap と BootstrapVue CSS ファイルをインポートします (順序は重要です)
'bootstrap/dist/css/bootstrap.css' をインポートします
'bootstrap-vue/dist/bootstrap-vue.css' をインポートします
// 必要に応じて、BootstrapVue アイコン コンポーネント プラグインをインストールします
// use(BootstrapVue as any) で修正できます。
createApp(App).use(BootstrapVue).component('Release', Release)
.use(router).mount('#app')</pre>
<p><strong>npm runserve の実行時に発生する蔙误:</strong></p>
<pre class="brush:php;toolbar:false;">コンパイル中... 9:57:17 AM
CopyPlugin 発行後 98%
警告 1 件の警告を含めてコンパイルされました 9:57:18 AM
./node_modules/bootstrap-vue/esm/vue.js の警告
「エクスポート 'default' ('Vue' として再エクスポート) が 'vue' に見つかりませんでした
アプリは次の場所で実行されています:
- ローカル: http://localhost:8080/
問題のチェックが進行中です...
src/main.ts のエラー:15:20
TS2345: タイプ 'BootstrapVuePlugin' の引数は、タイプ 'Plugin_2' のパラメータに割り当てることができません。
タイプ 'BootstrapVuePlugin' はタイプ '{ install: PluginInstallFunction; に割り当てることができません。 }'。
プロパティ「install」のタイプには互換性がありません。
「プラグイン関数<BvConfigOptions>」と入力します。タイプ「PluginInstallFunction」に割り当てることはできません。
パラメータ「Vue」と「app」のタイプには互換性がありません。
「アプリ<任意>」と入力します'VueConstructor<Vue>' タイプに次のプロパティがありません: extend、nextTick、set、delete、およびその他 3 つ。
13 | // 必要に応じて、BootstrapVue アイコン コンポーネント プラグインをインストールします
14 | //Vue.use(IconsPlugin).use(BootstrapVue として)
> 15 | createApp(App).use(BootstrapVue).component('Release', Release)
| ^^^^^^^^^^^^
16 | .use(router).mount('#app')</pre>
<p><strong>浏览器控制台出:</strong></p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError: 未定義のプロパティ 'prototype' を読み取れません
eval (config.js?228e:6) で
Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3924) にあります。
__webpack_require__ (app.js:849) で
fn で (app.js:151)
eval (props.js?cf75:1) で
Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:4200) にあります。
__webpack_require__ (app.js:849) で
fn で (app.js:151)
eval (model.js?58f2:1) で
Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:4116)</pre> にあります。
<p><br /></p>
bootstrap-vue-3
RUNをインストールする必要があります
npm i --save bootstrap-vue-3
次に、次のコードをmain.js
または
main.tsに追加します。 リーリー