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 操作関数を使用する手順

推薦する

WeChatアプレット+mqtt、esp8266温度と湿度の読み取り実装方法

まず、 esp8266 は mqtt を通じてメッセージを公開し、WeChat アプレットは mqt...

シームレスなカルーセル効果を実現するネイティブ js

参考までに、ネイティブjsでカルーセル効果(シームレススクロール)を実現しています。具体的な内容は以...

Dockerコンテナでユーザーを分離する方法

前回の記事「Docker コンテナの UID と GID を理解する」では、Docker コンテナ内...

Dockerはコンテナ外のコンテナ内でコマンドを実行します

コンテナ内でコマンドを実行したいが、コンテナに入りたくない場合があります。ではどうすればいいでしょう...

Apple 電卓の JS 実装

この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...

スケルトンスクリーン効果を実現する CSS

ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...

MySQL 8.0.11 圧縮版のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0圧縮パッケージのインストール方法、詳細は次のとおりです知らせ:オペレーティング シ...

Linux の操作とメンテナンスの基本 httpd 静的 Web ページ チュートリアル

目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...

nginx を最適化する 6 つの方法

1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...

Dockerコンテナを使用する簡単な例

目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...

任意の長さの配列を作成または埋めるための JS のヒントの要約

目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...

クリエイティブな会社概要ウェブページデザイン

ユニークな「About」ページ自分を他の人たちと差別化する素晴らしい方法は、本当にユニークな自己紹介...

Dockerがコンテナを起動するたびに、IPとホストが指定した操作が実行されます。

序文Dockerを使ってHadoopクラスタを起動するたびに、ネットワークカードの再バインド、IPの...

JavaScript 配列を走査する 5 つの方法

目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...

js は、Element の入力コンポーネントのいくつかの機能を実装し、それをコンポーネントにカプセル化します (サンプルコード)

現在実装されているのは、基本的な使用方法、クリア可能なボックス、パスワードボックスです。参考リンク:...