Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法

Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法

序文

Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。

環境

  • vue3.0.5
  • ビット2.3.3

Element Plusのインストール

糸追加要素プラス
# または
npm インストール element-plus --save

完全な紹介

'vue' から {createApp} をインポートします。
'element-plus' から ElementPlus をインポートします。
'element-plus/lib/theme-chalk/index.css' をインポートします。
'./App.vue' からアプリをインポートします。

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

Element Plus の js ファイルと css ファイルのサイズはかなり大きく、時間がかかることがわかります。

オンデマンドロード

vite-plugin-importerプラグインをインストールする

インストール

yarn に vite-plugin-importer を追加
# または
npm インストール vite-plugin-importer --save

Vite公式サイトにはプラグインコラムがあり、コミュニティ推奨プラグインを利用できます


このうち、vite-plugin-importer は babel-plugin-import を統合したもので、 babel-plugin-importコンポーネントとコンポーネント スタイルをオンデマンドで読み込むことができるため、 vite-plugin-importerでも同様に読み込むことができます。


vite.config.js を構成する

'vite' から {defineConfig} をインポートします
'@vitejs/plugin-vue' から vue をインポートします
'vite-plugin-importer' から usePluginImport をインポートします

// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポートする({
  プラグイン: [
    vue(),
    プラグインインポート({
      ライブラリ名: 'element-plus',
      カスタムスタイル名: (名前) => {
        `element-plus/lib/theme-chalk/${name}.css` を返します。
      },
    })、
  ]、
  解決する: {
    エイリアス: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    },
  },
})

メイン.js

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'element-plus' から { ElButton、ElSelect } をインポートします。

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
app.mount('#app')

vite-plugin-importerを使用してコンポーネントとスタイルをオンデマンドでロードすると、明らかな効果があります。

vite-plugin-style-importをインストールする

インストール

yarn に vite-plugin-style-import -D を追加します
# または
npm i vite-plugin-style-import -D

Element Plus の公式 Web サイトでは、vite-plugin-style-import オンデマンド読み込み方式が提供されています。

構成

設定ファイル

'vite' から {defineConfig} をインポートします
'@vitejs/plugin-vue' から vue をインポートします
'vite-plugin-style-import' から styleImport をインポートします。

// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポートする({
  プラグイン: [
    vue(),
    スタイルインポート({
      ライブラリ: [
        {
          ライブラリ名: 'element-plus',
          esModule: true、
          スタイルファイルを確認する: true,
          解決スタイル: (名前) => {
            `element-plus/lib/theme-chalk/${name}.css` を返します。
          },
          解決コンポーネント: (名前) => {
            `element-plus/lib/${name}` を返します。
          },
        },
      ]、
    })、
  ]、
  解決する: {
    エイリアス: {
      'vue': 'vue/dist/vue.esm-bundler.js' 
    },
  },
})

メイン.js

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'element-plus' から { ElButton、ElSelect } をインポートします。

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
app.mount('#app')

ご覧のとおり、 vite-plugin-style-import要求に応じてコンポーネント スタイルのみを読み込みます。

要約する

  • vite-plugin-importer は、必要に応じてコンポーネントとコンポーネント スタイルを読み込むことができます。
  • vite-plugin-style-import は、要求に応じてのみコンポーネント スタイルを読み込むことができます。
  • サードパーティのコンポーネント ライブラリを一度ロードするよりも、オンデマンドでロードする方が優れています。

Vue3 がサードパーティのコンポーネントライブラリをオンデマンドでロードする方法についての記事はこれで終わりです。Vue3 のオンデマンドコンポーネントライブラリのロードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js のモバイル コンポーネント ライブラリ mint-ui は、より多くのメソッドを読み込むために無限スクロールを実装します。
  • オンデマンドでロードされる Vue コンポーネント ライブラリの構築方法を説明します (概要)
  • Vue コンポーネント ライブラリをオンデマンド読み込みで置き換える方法

<<:  MySQL における in と exists の使い方と違いの紹介

>>:  Linux 3.X/4.x/5.x でパゴダ パネルのパスワードを忘れた場合の解決方法

推薦する

nginx のバージョン番号と WEB サーバー情報を隠すための解決策

Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...

Linux での grep コマンドの使い方の詳細な説明

1. 公式紹介grep は Linux でよく使用されるコマンドです。これは、ファイルやテキストに対...

Linuxネットワーク構成ツールの使用

この記事では、RHEL8 のネットワーク サービスとネットワーク構成ツール、およびネットワーク ファ...

トランジションコンポーネントのアニメーション効果を使用した Vue サンプルコード

トランジションドキュメントアドレスは、フェードインとフェードアウト効果を実現するための背景ポップアッ...

MySQLのインストールと設定方法のグラフィックチュートリアル(CentOS7)

1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...

Docker+Jenkinsによる自動デプロイの実現方法

Code Cloud を使用して Git コード ストレージ ウェアハウスを構築するhttps://...

JavaScriptアニメーション関数のカプセル化の詳細な説明

目次1. アニメーション機能の原理2. アニメーション関数のシンプルなカプセル化3. アニメーション...

CSSボックスモデルの紹介を読めば、混乱することはなくなるでしょう

Web デザインでよく耳にするプロパティ名: content、padding、border、marg...

JSで実現したページサイドバーの効果に関する研究

目次発見: ディスプレイアニメーションの応用実装:記事の1行目を表示する効果を実現する方法実際、その...

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

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

React コードを共有するためのベストプラクティス

プロジェクトがある程度複雑になると、必然的にロジックの再利用の問題に直面することになります。 Rea...

MySQL UNION演算子の基本知識ポイント

MySQL UNION 演算子このチュートリアルでは、MySQL UNION 演算子の構文と例を紹介...

LinuxシステムでFuserコマンドを使用する方法

Fuser コマンドとは何ですか? fuser コマンドは、特定のファイル、ディレクトリ、またはソケ...

1つの記事でJavaScriptのクロージャ関数について学ぶ

目次変数のスコープ閉鎖の概念クロージャの使用クロージャのデメリット最後に、クロージャのメリットとデメ...