Vue3 (パート 2) Ant Design Vue の統合

Vue3 (パート 2) Ant Design Vue の統合

前回の記事では、Vue3を使ったVue CLIプロジェクトの作成方法(その1)を紹介しました。次回は前回の記事をベースに以下の記事の内容を拡張していきます。

1. Ant Design Vueを統合する

SQL:

[email protected] をインストールします --save

互換性:

Ant Design Vue 2.xすべての最新ブラウザをサポートしています。

IE9+サポートする必要がある場合は、 Ant Design Vue 1.x & Vue 2.x使用できます。

IE シリーズのブラウザでは、 es5-shimes6-shimなどのPolyfillsのサポートが必要です。

2. コンポーネントの使用

公式ウェブサイトアドレス: https://2x.antdv.com/docs/vue/getting-started-cn

1. 完全な引用

main.ts の内容を次のように変更します。

ts
'vue' から {createApp} をインポートします。
'ant-design-vue' から Antd をインポートします。
'./App.vue' からアプリをインポートします。
'ant-design-vue/dist/antd.css' をインポートします。
'./router' からルーターをインポートします。
'./store' からストアをインポートします。
// 開発が簡単という利点がありますが、パッケージ化するとファイルサイズが大きくなるという欠点があります(ただし、影響はありません)
createApp(App).use(store).use(router).use(Antd).mount('#app')

2. コンポーネントリファレンス

インポートが完了したら、コンポーネントを問題なく使用できます。以前にVue2.0またはElement UIを使用したことがある場合は、比較的高速になります。

3. コンポーネントの使用例

以下のようにhomeにボタンを追加してみましょう。

1.ホームページに変更を加える

HTML:

<テンプレート>
  <div class="home">
    <a-button type="primary" danger>プライマリ</a-button>
    <img alt="Vue ロゴ" src="../assets/logo.png">
    <HelloWorld msg="Vue.js + TypeScript アプリへようこそ"/>
  </div>
</テンプレート>

<script lang="ts">
'vue' から defineComponent をインポートします。
import HelloWorld from '@/components/HelloWorld.vue'; // @ は /src へのエイリアスです

エクスポートデフォルトdefineComponent({
  名前: 'ホーム'、
  コンポーネント:
    こんにちは世界、
  },
});
</スクリプト>

2. 効果を確認するためにサービスを再起動する

serverダブルクリックして起動し、以下に示すように結果を表示します。

IV. 結論

これで、 Vue3Ant Design Vueの統合に関するこの記事は終了です。Vue3 とAnt Design Vueの統合に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 の使用 (パート 1) Vue CLI プロジェクトの作成
  • Vue3 の父子値転送に関する簡単な説明
  • Vue3における非親子コンポーネント通信の詳細な説明
  • vue3で注意すべき2つのポイントを詳しく解説:セットアップ
  • Vue3 の emitting と attr の違いの分析
  • vue3 再帰コンポーネントカプセル化の全プロセス記録

<<:  DockerにRedisをインストールし、パスワードを設定して接続する方法

>>:  Sqoop エクスポート マップ 100% 削減 0% さまざまな理由と解決策でスタック

推薦する

Linuxプロセス通信におけるFIFOの実装

FIFO通信(先入れ先出し)関連のないプロセス間の通信を可能にする FIFO 名前付きパイプ。パイプ...

Tencent インタビュー: SQL ステートメントの実行が非常に遅くなる理由は何ですか? ---後悔シリーズは見ないで(推奨)

正直に言うと、この質問には MySQL のコア知識がかなり必要で、コンピュータ ネットワークの知識を...

Vue マルチ選択リスト コンポーネントの詳細な説明

マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...

MySQL マルチインスタンス構成のアプリケーションシナリオ

目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...

MySQL ストアド プロシージャにおけるループ ステートメント (WHILE、REPEAT、LOOP) の使用法の分析

この記事では、例を使用して、MySQL ストアド プロシージャでのループ ステートメント (WHIL...

Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)

学習プロセス中にプッシュ イメージが常にタイムアウトすることがわかったため、Alibaba Clou...

Docker 接続 MongoDB 実装プロセスとコード例

コンテナが起動した後まず管理者にログインして新しいユーザーを作成してください $ docker ex...

Tomcat サーバーの設定と Web プロジェクトの公開に関する IDEA グラフィック チュートリアル

1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...

Dockerで複数のSpringbootを実行するための詳細なチュートリアル

Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...

HTML テーブル マークアップ チュートリアル (41): テーブル ヘッダーの幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...

Reactコンポーネント通信の詳細な説明

目次コンポーネント通信の概要コンテンツ3つの方法まとめコンポーネントコミュニケーション - 父から息...

JavaScript フォーム検証の例

HTML フォームは、名前、電子メール アドレス、場所、年齢などのユーザー情報を収集するためによく使...

Vueフロントエンドの効率的な開発のためのレンダリング手順をリストします

v-for ディレクティブリストといえば、ループについても触れなければなりません。v-for 命令は...

ES6 の Set および WeakSet コレクションの詳細な説明

目次セットは値が重複しない特別なコレクションです。セットコレクション基本API独自の価値判断セットを...

Vueは3階層メニューを再帰的に実装する

この記事の例では、3階層メニューを再帰的に実装するVueの具体的なコードを参考までに共有しています。...