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

推薦する

CentOS7でFTPサーバーを設定する方法

FTP は主にファイル転送に使用され、Linux では vsftpd で実装されるのが一般的です。F...

虫眼鏡ケースのJavaScriptオブジェクト指向実装

この記事では、参考までに、虫眼鏡のJavaScriptオブジェクト指向実装の具体的なコードを紹介しま...

OR キーワードを使用した MySql 複数条件クエリ ステートメント

前の記事では、And キーワードを使用した MySql の複数条件クエリ ステートメントを紹介しまし...

MySQL 5.7.20 zip インストール チュートリアル

MySQL 5.7.20 zipインストール、具体的な内容は次のとおりです(1)圧縮パッケージを解凍...

MySQLでよく使われるSQLとコマンドの入力からデータベースの削除、そして終了まで

目次開始と停止データベース関連の操作データベーステーブル関連の操作制約関連デフォルトの制約高度なデー...

Windows で MySQL 5.7.17 をインストールし、エンコードを utf8 に設定する方法

ダウンロードMySQL 公式ダウンロード、Windows (x86、64 ビット)、ZIP アーカイ...

Docker で Ubuntu に Python3 と Pip をインストールする際の問題

文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...

Vue3+el-tableは行と列の変換を実現します

目次行と列の変換トランスクリプトの構成を分析するvue3 + el-table で作成されたトランス...

Ubuntu 18.04 が VMware 仮想マシンでネットワークに接続できない問題の解決策

仮想マシン内のUbuntu 18.04がネットワークに接続できない問題の解決策は次のとおりですVMw...

TS 数値区切り文字とより厳密なクラス属性チェックの詳細な説明

目次概要演算子の改良と正確なinstanceofよりスマートなオブジェクトリテラル推論固有のシンボル...

有名ウェブサイトのロゴにおすすめのフォント40選

世界で最も有名なウェブサイトのロゴデザインにはどんなフォントが使われているかご存知ですか?これらのフ...

VueはOSSを使用して画像や添付ファイルをアップロードします

OSS を使用して Vue プロジェクトに画像や添付ファイルをアップロードするここでは、写真のアップ...

docker runの--rmオプションの使用方法

Docker コンテナが終了しても、デバッグを容易にし、ユーザー データを保持するために、デフォルト...

MySQL の 6 つの一般的な制約タイプの詳細な説明

目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...

Linux でパスワードを入力せずに sudo コマンドを実行する方法

sudo コマンドを使用すると、信頼できるユーザーは別のユーザー (デフォルトでは root ユーザ...