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 でパゴダ パネルのパスワードを忘れた場合の解決方法

推薦する

dockerでrabbitmqをインストールすると管理ページに入れなくなる問題

1. 環境整備Tencent Cloud Server CENTOS 7 バージョンDockerコン...

node.js で Web サーバーを作成する手順の詳細な説明

序文node.js でサーバーを作成するのは非常に簡単です。小さいながらも完全な Web サーバーを...

mysql8.0.11 winx64 インストールと設定のチュートリアル

mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと共...

この記事ではCSSの組み合わせセレクターの使い方を説明します

CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれます。 CSS3 に...

MySQL共通インデックスとユニークインデックスの詳細な説明

シナリオ1. ID番号のフィールドを備えた市民システムを維持する2. ビジネス コードでは、重複する...

mysql5.7.24 バージョンのインストール手順と解凍時に発生した問題の概要

1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...

古い Vue プロジェクトに Vite サポートを追加する方法

1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...

表のセル間の境界線/区切り線を非表示にする方法

上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...

aタグに下線を付け、クリック前後で色を変える方法

コードをコピーコードは次のとおりです。リンクフォントサイズ: 12px;色: #000000;テキス...

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

この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...

WeChatアプレットはシンプルな計算機を実装する

WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....

MySQL データベースのインデックス順序の詳細な説明

目次事件の原因解剖学ファイルの並べ替えファイルのソートが非常に遅いのですが、他に解決策はありますか?...

Centos7のFirewalldファイアウォールの基本コマンドの詳細な説明

1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...

JSはカリキュラムタイムテーブルアプレット(スーパーカリキュラムタイムテーブルを模倣)を実装し、カスタムバックグラウンド機能を追加します

概要:市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タ...

Web2.0製品と機能の簡単な紹介

<br />Web2.0とは何ですか? Web2.0にはソーシャルネットワーク製品とその...