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% さまざまな理由と解決策でスタック

推薦する

Alibaba Cloud で MySQL リモート接続を構成するための詳細な手順

序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...

MySQL サーバーの接続、切断、および cmd 操作

mysql コマンドを使用して MySQL サーバーに接続します。 MySQL サーバーが起動したら...

CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。

1. リストシンボルを設定するlist-style-type: attribute; //リストの...

eCharts でパーセンテージ付きの横棒グラフを実装する方法

目次サンプルコードレンダリングコード分​​析要約するサンプルコード var データ = [220, ...

Dockerデーモンのセキュリティ設定項目の詳細な説明

目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...

Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明

実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...

デザイン理論:フォントデザインの基礎

<br />言葉は、人間の思考や感情を伝えるために必然的に生み出されるものです。人類の文...

Ubuntu で XFS ファイルシステム用の LVM を作成する方法

序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...

OpenSSL は双方向認証のチュートリアルを実装します (サーバーとクライアントのコード付き)

1. 背景1.1 問題点最近の製品テスト レポートでは、PKI ベースの認証方法の使用が推奨されて...

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

CentOS7にNginxをインストールして自動起動を設定する方法

1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...

MySQL フラッシュバック ツール binlog2sql の詳細なインストールと設定のチュートリアル

概要binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...

SQLでEXPLAINコマンドを使用する方法

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...

Nginx は rtmp ライブ サーバーの実装コードを構築します

1. nginxソースディレクトリに新しいrtmpディレクトリを作成し、git clone http...

vuex データの永続化のための 2 つの実装ソリューション

目次ビジネス要件:解決策 1: vuex-persistedstate解決策2: vuex-pers...