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

推薦する

CSS の高度な使い方(実戦で活用)

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

HTML におけるスクリプトの配置に関する簡単な説明

以前は、スクリプトは HTML 内のどこにでも配置できると思っていましたが、今日、要件に取り組んでい...

Alibaba Cloud Centos6.X でメールを送信する際に発生するさまざまな問題

序文: Webサービスを提供するために、Alibabaクラウドホストを新しくインストールしました。す...

DockerでGDBを使用するときにブレークポイントを入力できない問題を解決する

質問docker で gdb を実行すると、ブレークポイントに到達しますが、ブレークポイントに入るこ...

CSSで検索ボックスを非表示にする機能を実装します(アニメーション順方向と逆方向のシーケンス)

上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...

HTML ページ ヘッダー コード例の詳細な説明

知識ポイント1: ヘッダー情報にWebページのベースURLを設定するベース URL の本質は、ハイパ...

MySQL テーブルスペースのリカバリに対する正しいアプローチについての簡単な説明

目次予備的注釈問題の再現データ削除の原則データの再利用どの操作がデータホールの原因になりますか?表領...

ウェブフォームデザインのための5つの実用的なヒント

1. フォームテキスト入力のモバイル選択: テキスト入力フィールドにプロンプ​​トが追加されている場...

display:olck/none を使用してメニューバーを作成する方法

display:bolck/none によるメニューバーの完成の効果 図 1:まず、完成したエフェク...

Macシステムをインストールした後にVMWareがフルスクリーンで表示できない問題を解決する

システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...

MySQL 8.0.18 はクローンプラグインを使用して MGR 実装を再構築します

3 ノード MGR 内の 1 つのノードに異常があり、MGR クラスターに再度追加する必要があるとし...

時間範囲効果を実現するためのJavaScript

この記事では、時間範囲効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...

JavaScriptはランダムコードの生成と検証を実現する

JavaScriptでのランダムコードの生成と検証は参考までに。具体的な内容は以下のとおりです。イベ...

MySQLコマンドプロンプトで入力エラーが発生したときに前のコマンドを修正する方法

目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...

Linux でリモート サーバー ファイルの状態を表示する方法

以下のように表示されます。 test コマンドはファイルが存在するかどうかを判断します。 ssh u...