vite2.x は ant-design-vue@next コンポーネントのオンデマンド読み込みを実装します。

vite2.x は ant-design-vue@next コンポーネントのオンデマンド読み込みを実装します。

1. 使用バージョン

  • バイト:2.0
  • ant-design-vue: 2.0.0-rc.8
  • ヴュー:3.0.5

2. viteプラグインをインストールする

yarn add vite-plugin-style-import -D または npm i vite-plugin-style-import -D

プラグインリポジトリアドレス: github

3.vite.config.js の設定

'@vitejs/plugin-vue' から vue をインポートします
'vite-plugin-style-import' から styleImport をインポートします。
/**
 * @type {import('vite').UserConfig}
 */
エクスポートデフォルト{
 プラグイン: [
  vue(),
  スタイルインポート({
   ライブラリ: [{
    ライブラリ名: 'ant-design-vue',
    esModule: true、
    解決スタイル: (名前) => {
     `ant-design-vue/es/${name}/style/css` を返します。
    },
   }]
  })
 ]
}

4. テスト実行

メイン.js

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'ant-design-vue' から { Input } をインポートします。
const app = createApp(App)
app.use(入力)
app.mount('#app')

コンポーネントで使用される

<テンプレート>
 <!-- スクリプト設定でインポートおよび使用されます。登録は必要ありません-->
 <Button type="primary"> プライマリ</Button>
 <!-- main.js でコンポーネントを登録するには use を使用します -->
 <a-input placeholder="基本的な使い方" />
</テンプレート>
<スクリプトの設定>
「ant-design-vue」から Button をインポートします。
</スクリプト>

vite2.x で ant-design-vue@next コンポーネントのオンデマンド読み込みを実装する方法についての記事はこれで終わりです。vite2.x オンデマンド読み込みの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vite2.x に基づく Vue 3.x プロジェクトの実装
  • vite2.0+vue3 モバイルプロジェクトの詳細な説明
  • vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明
  • vite を使用して vue3 アプリケーションを構築する方法
  • Vue3.0 + TypeScript + Vite初体験の詳しい説明
  • Vite と Vue CLI の長所と短所
  • vite+vue3+element-plus プロジェクトをビルドする手順

<<:  ubuntu16.04 で nginx を完全にアンインストールするための関連コマンド

>>:  MySQLは変数を使用してさまざまなソートを実装します

推薦する

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

圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...

MySQL のインデックスの種類と基本的な使用例

目次索引- 総合索引- ユニークなインデックス- 主キーインデックス- 複合インデックス- 全文索引...

HTML で Web ページに動的な時計を書く

HTML を使用して動的な Web クロックを作成します。コードは次のとおりです。 <!DOC...

HTMLノードの追加と削除の簡単な例

<br />HTMLノードの追加と削除の簡単な例<input type="...

Zabbixを使用してOracleテーブルスペースの操作プロセスを監視する

0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...

docker を使用して influxdb と mongo をデプロイするための一般的なコマンド

Docker ベースのデータベースをデプロイするsudo docker pull influxdb ...

GaussDB for MySQL パフォーマンス最適化の詳細な説明

目次背景インスピレーションは人生から生まれる速達配送の最適化原則GaussDB の最適化 (MySQ...

ポートマッピング後に Docker コンテナが突然接続に失敗する問題のトラブルシューティング プロセス

1. 背景通常、外部サービスを提供する必要がある Docker コンテナの場合、起動時に -p コマ...

secure_file_priv nullの問題を解決する

secure_file_priv = ' ';管理者としてcmdを実行します。 my...

よく使用される Linux コマンドの完全なリスト (推奨コレクション)

目次1. システム情報2. シャットダウン(システムのシャットダウン、再起動、ログアウト) 3. フ...

CSS で画像アダプティブ コンテナを実装するいくつかの方法 (要約)

多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...

行間隔が広い場合の解決策(IE では 5 ピクセル多い)

コードをコピーコードは次のとおりです。 li {幅:300px; 高さ:23px; 行の高さ:24p...

MySQL 5.7.18 のダウンロードとインストールの詳細な手順

MySql ダウンロード1. 公式サイトを開き、ダウンロード パスを見つけます。ダウンロード アドレ...

テーブル内の要素のドラッグと並べ替えの問題について簡単に説明します

最近、要素テーブルを使用すると、並べ替えの問題によく遭遇します。単純な並べ替えであれば、要素の公式が...

詳細なLinuxインストールチュートリアル

(Win7 システム) VMware 仮想マシンのインストール チュートリアルVMware は仮想マ...