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

推薦する

Vue の computed と watch の違いを理解する方法

目次概要計算された監視プロパティを監視する要約する概要Vue プロジェクトでは、computed と...

Centos7 に mysql と mysqlclient をインストールする際に遭遇する落とし穴の概要

1. MySQL Yumリポジトリを追加するMySQL公式サイト>ダウンロード>MySQ...

MySql 認証に基づく vsftpd 仮想ユーザー

目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...

vue.js 動的コンポーネントの詳細な説明

:動的コンポーネントv-bind:is="component name" を使用...

MySQLインデックスの詳細な分析

序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...

MySQL 8 の新機能: 非表示のインデックス

背景インデックスは諸刃の剣です。クエリ速度は向上しますが、DML 操作も遅くなります。結局のところ、...

Tomcat でよく使われるフィルターの詳細な説明

目次1. クロスドメインフィルタ CorsFilter 1.1 設定例1.2 パラメータの説明2. ...

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

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

MySQLデータベースのSYNフラッディング問題を解決する

Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...

初心者向けウェブサイト構築チュートリアルの概要

これら 6 つの記事を書いた後、私は少し混乱し始めました。次にどこに書けばいいのか分かりません。ドメ...

MySQL 結合テーブルと ID 自動増分の例の分析

結合の書き方左結合を使用する場合、左側のテーブルが必ず駆動テーブルになりますか? 2 つのテーブルの...

HTML、CSS、RSSフィードが正しいかどうかを確認する無料ツール

この種のエラーに対処するための 1 つの方法は、まずマークアップとスタイルシートを検証することです。...

MySQLでデータを削除してもディスク領域が解放されないのはなぜですか

目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...

ウェブページのアクセス速度に関する主な問題と解決策

<br />ウェブサイトのアクセス速度はウェブサイトのトラフィックに直接影響を及ぼし、ウ...

MySQLは効率的なインデックス例分析を確立する

この記事では、例を使用して、MySQL で効率的なインデックスを作成する方法について説明します。ご参...