ant-design vueは使用できますか?

ant デザインビューを使用できます。 ant design vue は、Ant Design 設計仕様に従い、Vue を使用して実装された高品質の UI コンポーネント ライブラリであり、エンタープライズ レベルのミッドエンドおよびバックエンド製品の開発と提供に使用されます。

#この記事の動作環境: Windows10 システム、vue 2.9、thinkpad t480 コンピューター。

推奨: "

vue チュートリアル "

Ant Design Vue は、Ant Design 設計仕様に従い、Vue を使用して実装された高品質の UI コンポーネント ライブラリであり、開発に使用されます。エンタープライズレベルのミッドエンドおよびバックエンド製品を提供します。

機能

エンタープライズレベルのミッドエンドおよびバックエンド製品のインタラクティブな言語とビジュアルスタイルから抽出されています。

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

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

サポートされる環境

最新のブラウザおよび IE9 以降 (ポリフィルが必要)。

サーバー側レンダリングをサポートします。

インストール

npm または Yarn を使用してインストールします

開発には npm または Yarn を使用することをお勧めします。これにより、開発環境でのデバッグが容易になるだけでなく、だけでなく、安全にパッケージ化して実稼働環境にデプロイし、エコシステム全体とツールチェーンによってもたらされる多くのメリットを享受することもできます。

$ npm install ant-design-vue --save
$ yarn add ant-design-vue

ネットワーク環境が良くない場合は、cnpm の使用をお勧めします。

コンポーネント ライブラリは、vue の新機能であるスロット スコープ (2.5.0 の新機能)、provide / inject (2.2.0 の新機能) を使用します。

ブラウザの紹介

スクリプトを使用するおよび link タグを使用してブラウザにファイルを直接導入し、グローバル変数 antd を使用します。

antd.js antd.css および antd.min.js antd.min.css は、npm リリース パッケージの ant-design-vue/dist ディレクトリで提供されます。 https://www.jsdelivr.com/package/npm/ant-design-vue または UNPKG からダウンロードすることもできます。

ビルドされたファイルを使用することは強くお勧めできません。ビルドされたファイルはオンデマンドでロードできないため、基礎となる依存モジュールに対する迅速なバグ修正サポートを得るのが困難です。

注: antd.js を導入する前に、自分で moment を導入する必要があります。

例

import Vue from 'vue'
import { DatePicker } from 'ant-design-vue';
Vue.component(DatePicker.name, DatePicker)

スタイルの紹介:

import 'ant-design-vue/dist/antd.css';  // or 'ant-design-vue/dist/antd.less'

オンデマンドでロード

次の 2 つのメソッドは、使用されるコンポーネントのみをロードできます。

babel-plugin-import を使用します (推奨)。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

注: webpack 1 では libraryDirectory を設定する必要はありません。

その後、ant-design-vue からモジュールをインポートするだけで、スタイルを別途導入する必要はありません。以下の手動導入方法に相当します。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'ant-design-vue';

マニュアル紹介

import DatePicker from 'ant-design-vue/lib/date-picker';  // 加载 JS
import 'ant-design-vue/lib/date-picker/style/css';        // 加载 CSS
// import 'ant-design-vue/lib/date-picker/style';         // 加载 LESS

ant-design-vueについて

ご存知のとおり、Ant Designはデザイン言語として立ち上げられ、現在は廃止されています。長年の反復と蓄積を経て、その UI デザインのアイデアは一連の事実上の標準となり、多くのフロントエンド開発者や企業に求められ、愛されています。また、React 開発者にとっては魔法の武器でもあります。 ant-design-vue によって、Vue 開発者が Ant Design の優れたデザインを享受できるようになることを願っています。

ant-design-vue は Ant Design の Vue 実装です。コンポーネントのスタイルは Ant Design と同期されます。コンポーネントの HTML 構造と CSS スタイルも一貫しています。まさに、コンポーネントの変更ゼロを実現します。スタイルを維持し、コンポーネント API も可能な限り維持されます。

Ant Design Vue は、プログラマーに快適な開発エクスペリエンスを提供することに尽力しています。

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