vue3.0共通コンポーネントの自動インポート方法の例

1. 前提条件

インポートには require.context メソッドを使用します。vite で作成したプロジェクトで使用すると、「require not found」というエラーが報告されるため、webpack を使用してプロジェクトを作成する必要があります。または、Vite でこの問題を解決する方法を教えてもらえますか。

II. ルール

私が使用する登録ルールは、src/components/ パスの下にあるすべてのディレクトリとサブディレクトリを検索し、「index.vue」という名前のファイルを検索し、親ディレクトリの名前を登録用のコンポーネント名として使用することです。構造は次のとおりです。

index.vue のみが登録され、他の名前のコンポーネントは登録されません。

3. 登録

vue3.0にはimport "Vue" from vueがないので、appを使って登録する必要があり、main.jsでしか実行できません。

エントリーファイル登録

// src/main.js

'vue' から {createApp} をインポートします。
const app = createApp(App)
//パブリックコンポーネントを動的に登録します const requireComponent = require.context(
    // コンポーネントディレクトリの相対パスは '@/components' です。
    // サブディレクトリを照会するかどうか true、
    // ベースコンポーネントファイル名に一致する正規表現 /index.vue$/
）
const jieguo = requireComponent.keys().filter((item:any)=> true)
jieguo.forEach((item:any)=>{
    定数componentConfig = requireComponent(item)
    定数名 = item.split("/")[1]
    app.component(名前、componentConfig.default || componentConfig)
})
// 登録終了 app.mount('#app')

パブリック コンポーネントを作成、削除、または名前変更する場合、登録は必要ありません。プロジェクトを再開して、水を一口飲みましょう。

要約する

これで、vue3.0 パブリック コンポーネントの自動インポートに関するこの記事は終了です。vue3.0 パブリック コンポーネントのインポートに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。