Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します

Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します

Viteプロジェクトを作成する

パフォーマンスが成功か失敗かを決定します。Vite は確かに高速です。
cmd コマンドライン (デフォルトで node と npm がすでにインストールされています) で、npm init @vitejs/app vue-study – --template vue; を実行します。
vue-study に cd し、npm install (依存関係をインストール)、npm run dev (プロジェクトを開始) を実行します。

コンポーネントの作成

pages という新しいディレクトリを作成し、pages の下に、contents という新しいディレクトリを作成します。contents の下に、特定のコンポーネント ディレクトリ page を作成できます。この時点で、ディレクトリ構造は次のようになります。

アプリ.vue

<テンプレート>
 <p @click="onChangeContents('./pages/contents/gp/gp.vue')">郭 ペイ</p>
 <p @click="onChangeContents('./pages/contents/systemManges/xtcs.vue')">システムパラメータ</p>
 <p>{{currentTabComponent}}</p>
 <!-- <サスペンス> -->
 <コンポーネント:is="DefineAsyncComponent({
     //ファクトリー関数ローダー: Modeuls[currentTabComponent],
     // // デフォルト値: 無限大 (つまりタイムアウトなし、単位: ミリ秒)
     タイムアウト: 3000、
    })"></コンポーネント>
 <!-- </サスペンス> -->
</テンプレート>
<script lang="ts">
 輸入 {
  定義コンポーネント、
  非同期コンポーネントの定義、
  反応的、
  参照
 } から 'vue'
 エクスポートデフォルトdefineComponent({
  名前: 'アプリ'、
  設定() {
   //vite は指定されたパスのすべてのモジュールをロードします const Modeuls = import.meta.glob('./pages/contents/*/*');
   const onChangeContents = function(URL) {
    currentTabComponent.value = URL;
    コンソールログ(現在のタブコンポーネント)
   }
   currentTabComponent を ref('./pages/contents/systemManges/xtcs.vue') とします。
   非同期コンポーネントを定義します。
   戻る {
    非同期コンポーネントの定義、
    現在のタブコンポーネント、
    コンテンツの変更時、
    モデル
   }
  },
 })
</スクリプト>

これで、vue3.0+vite2 で動的非同期コンポーネント遅延読み込みを実装する方法についての説明は終わりです。vue3.0+vite2 の動的非同期遅延読み込みに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Viteはプロジェクトを構築し、マイクロフロントエンドをサポートします
  • この記事では、Viteがブラウザのリクエストに対して何を行うかを説明します。
  • Vite+ElectronでVUE3デスクトップアプリケーションを素早く構築
  • 古い Vue プロジェクトに Vite サポートを追加する方法
  • Vite2.0の落とし穴
  • プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装
  • vite+vue3+element-plus プロジェクトをビルドする手順
  • Viteの原理を学ぶ

<<:  nginxアクセス制御の実装例

>>:  MySQL slow_log テーブルを InnoDB エンジンに変更することはできません。詳細な説明

推薦する

MySQL のインデックスの原理とクエリの最適化の詳細な説明

目次1. はじめに1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 2...

MYSQL 5.6 スレーブレプリケーションの展開と監視

MYSQL 5.6 スレーブレプリケーションの展開と監視MYSQL 5.6 のインストールと展開 #...

Linux で実行中のすべてのプロセスを表示する方法

ps コマンドを使用できます。プロセスの PID など、現在実行中のプロセスに関する関連情報を表示で...

MySQL パフォーマンス最適化のヒント

MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...

いくつかの CSS3 タグの短縮形 (推奨)

border-radius: CSS3 丸い角構文: border-radius: 25px;楕円...

MySQL で複数の主キーが定義されているエラーの解決方法

主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成( フィールド名タイプ、 フ...

uniapp は日付と時刻の選択機能を実装します

この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...

du コマンドを使用して Linux システム ディレクトリのサイズを取得する方法

Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...

Vueでjsonpを使用する方法

目次1. はじめに2. インストール3. 使用4. vueファイルの使用1. はじめに最近、手書き入...

HTMLタグと基本要素の学習のまとめ

1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって...

HTML 要素の高さ、offsetHeight、clientHeight、scrollTop などの詳細な説明。

要素に関するいくつかの属性フロントエンドの日常的な開発では、一部のページのプロパティを取得または監視...

開発をスピードアップできる VueUse ライブラリ 5 つ (まとめ)

目次VueUse にはどのようなユーティリティがありますか? VueUseをVueプロジェクトにイン...

Kylin 4.0.2 (Ubuntu) でブート パーティションを拡張するプロセスの紹介

目次序文1. 新しいパーティションを準備する2. ブートパーティションをコピーする3. fstabフ...

ローカルサーバーを構築するためのwebpack-dev-serverの実装

目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...

Linuxでスワップパーティションファイルを作成する方法

スワップの紹介Linux のスワップ (スワップ パーティション) は、Windows の仮想メモリ...