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-shimやes6-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. 結論

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