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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue のすべてのパブリックコンポーネントを簡潔かつ明確に一度に紹介する方法

<<:  mysql5.7.17.msi インストール グラフィック チュートリアル

>>:  Mysql5.7 で JSON 操作関数を使用する手順

推薦する

ReactRouterの実装

ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...

innodb_flush_method 値メソッド (例の説明)

innodb_flush_methodのいくつかの典型的な値 fsync: InnoDB は fs...

Vueはプルダウンを実装してさらに読み込む

Element-UI に慣れた開発者なら、無限スクロールの InfiniteScroll が使いにく...

Vue 開発ツリー構造コンポーネント (コンポーネント再帰)

この記事では、Vue開発ツリー構造コンポーネントの具体的なコードを例として紹介します。具体的な内容は...

MySQL 集計関数のネストされた使用操作

目的: MySQL 集計関数のネストされた使用集計関数は直接ネストできません。例: max(coun...

フレームセットを使用して複雑なページレイアウトを実装するためのテクニックの概要

コードをコピーコードは次のとおりです。 <html> <!--混合フレームレイアウ...

Ubuntu 基本チュートリアル: apt-get コマンド

序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...

MySQL でストアド プロシージャを作成し、データ テーブルに新しいフィールドを追加する方法の分析

この記事では、例を使用して、MySQL でストアド プロシージャを作成し、データ テーブルに新しいフ...

Nginx の純粋な構成でリアルタイム ログ レポートを実現するためのアイデアと方法

目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...

フォーム送信ページの更新がジャンプしない

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

HTML検証 HTML検証

HTML 検証はHTML 検証を指します。これは、HTML ドキュメントを分析し、標準の HTML ...

MySQL 操作: JSON データ型の操作

前回の記事では、MySQL データ保存手順パラメータの詳細な例を紹介しました。今日は、JSON デー...

JavaScript の 3 つの BOM オブジェクト

目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...

Vue カスタム箇条書きボックス効果 (確認ボックス、プロンプトボックス)

この記事の例では、参考のためにVueカスタムポップアップ効果の具体的なコードを共有しています。具体的...

JavaScriptは双方向リンクリストプロセス分析を実装します

目次1. 二重連結リストとは何か2. 双方向リンクリストのカプセル化3. 双方向リンクリストの一般的...