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は変数を使用してさまざまなソートを実装します

推薦する

Linux のハードリンクとソフトリンクの区別

Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...

jsは画像切り取り機能を実現する

この記事の例では、画像の切り取りを実現するためのjsの具体的なコードを参考までに共有しています。具体...

Vue 関数のアンチシェイクとスロットリングの正しい使用方法

序文1. デバウンス: 高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されま...

MySQLに画像を保存する方法

1 はじめにデータベースを設計する場合、画像や音声ファイルをデータベースに挿入することは避けられませ...

さようなら Docker: 5 分で Containerd に移行する方法

Docker は非常に人気のあるコンテナ技術です。K8S によって廃止され、別のコンテナ技術である ...

Nginx リバース プロキシと負荷分散の実践

リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...

Vue エクスポート Excel 機能の全プロセス記録

目次1. フロントエンドのリーディングプロセス: 2. プラグインの使用と初期化2.1 vue-ad...

antd pro に基づく SMS 認証コード ログイン機能 (プロセス分析)

目次まとめ全体的なプロセスフロントエンドページコード検証コードとログイン サービスをリクエストする ...

Vue3の一般的なAPIの使用方法の紹介

目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...

MySQLの使い方の詳細な説明

目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...

ウェブデザインにおける階層化インターフェースの設計経験

多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を...

VirtualBox を使用して Linux クラスターをシミュレートする方法

1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...

MySQLセグメンテーション関数substring()の具体的な使用法

MySQL には、主に left()、right()、substring()、substring_i...

ウェブページのグリッドデザインを考える

<br />元のアドレス: http://andymao.com/andy/post/8...