antd は vue での使用に適していますか?

antd は vue に適しています。ant design には vue バージョンがあり、対応する名前は「ant-design-vue」です。「npm i --save ant-design-vue」コマンドを使用できます。 vue プロジェクトにインストールして使用するだけです。

この記事の動作環境: Windows7 システム、vue2.0 バージョン、Dell G3 コンピューター。

ant design の vue バージョン - ant-design-vue の概要

ant-design-vue は、Ant Design によって公式に推奨されている唯一の Vue バージョンの UI コンポーネントです。 Ant Financial Library は、実際には Ant Design の Vue 実装であり、コンポーネントのスタイルは Ant Design と同期されており、コンポーネントの HTML 構造と CSS スタイルも一貫しています。使用してみると、これが数少ない完全な VUE コンポーネント ライブラリと開発ソリューションの統合プロジェクトの 1 つであることがわかりました。

公式 Web サイト:

https://www.antdv.com/docs/vue/introduce-cn/

利点:

企業から抜粋レベル ミッドエンドおよびバックエンド製品のインタラクション言語とビジュアル スタイル。

すぐに使える高品質の Vue コンポーネント。

React 設計ツール システムの Ant Design を共有します。

ant-design-vue のグローバル導入

1. まず、vue のスキャフォールディング ツール vue-cli を使用して vue プロジェクトを作成します

2. ant-design-vue をインストールします

コマンド ライン ツールを使用し、プロジェクト パスに切り替え、コマンド [npm i --save ant-design-vue] を使用してインストールします (以下に示すように)

1.png

3. グローバル導入

(1) 導入完了

main.js へのグローバル導入と登録

 import Antd from 'ant-design-vue'
  import 'ant-design-vue/dist/antd.css'
  Vue.use(Antd)

登録コンポーネントの導入は不要このページでは、すべてのコンポーネントを直接使用する

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>
<script>
export default {}
</script>

(2) 一部のコンポーネントをインポートする

プロジェクトで使用する必要があるコンポーネントをmain.js

import { Button } from "ant-design-vue";
import 'ant-design-vue/lib/button/style/css'
Vue.component(Button.name, Button)

にインポートして登録します。

この登録済みコンポーネントを直接使用できます

<template>
    <div>
        <a-button type="primary">hello world</a-button>
    </div>
</template>
<script>
export default {}
</script>

推奨: "vue チュートリアル "

以上がantd は vue での使用に適していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。