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 エンジンに変更することはできません。詳細な説明

推薦する

Vue はスクロール可能なポップアップウィンドウ効果を実装します

この記事では、スクロール可能なポップアップウィンドウ効果を実現するためのVueの具体的なコードを参考...

HTML テーブル タグ チュートリアル (34): 行スパン属性 ROWSPAN

複雑なテーブル構造では、一部のセルが水平方向に複数のセルにまたがるため、行間属性 ROWSPAN を...

MySQL 5.6 圧縮パッケージのインストール方法

MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...

DIV+CSS命名規則の詳細な説明はSEO最適化に役立ちます

1. CSSファイルの命名規則提案: 文字、_、-、数字を使用します。文字で始まる必要があり、純粋な...

Vue で wangeditor リッチテキスト編集を使用する際の問題

wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テ...

テーブル切り替えのための JavaScript プラグインのカプセル化

この記事では、テーブル切り替えプラグインを実装するためのJavaScriptのカプセル化コードを参考...

読み取り専用と無効の違い

要約すると: Readonly は入力 (テキスト/パスワード) とテキスト領域に対してのみ有効です...

スタイルを書く際の背景色宣言の重要性

タイトルの通り、ページを修正すると以下のような状況が発生する可能性があります。現在、古いページを改修...

CentOS サーバーのセキュリティ構成戦略

最近、ブルートフォース攻撃によるサーバのクラッキングが頻発しています。侵入行為を大まかに分析し、よく...

12個のJavascriptテーブルコントロール(DataGrid)が整理されています

DataGrid コントロールの DataSource プロパティがデザイン時に設定されている場合、...

MySQL に配列を保存するサンプルコードと方法

多くの場合、ストアド プロシージャを作成するときに配列がよく使用されますが、MySQL ではストアド...

Windows プラットフォームでの MySQL のインストールと設定方法と注意事項

2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...

MySQLのさまざまなロックに関する詳細な理解

目次ロックの概要ロックの分類データベース操作の粒度データ操作の種類MySQL ロックさまざまなストレ...

曇り空のアイコン効果を実現する純粋な CSS

効果効果は以下のとおりです​実装のアイデアbox-shadow プロパティを使用して、複数の灰色の円...

MySQLアラームの詳細な分析と処理

最近、あるサービスにアラームが発生し、耐えられなくなっています。アラーム情報は次のとおりです。メトリ...