Kann Ant-Design-Vue verwendet werden?

ant Design Vue ist verfügbar. ant design vue ist eine mit Vue implementierte hochwertige UI-Komponentenbibliothek, die den Designspezifikationen von Ant Design folgt und zur Entwicklung und Bereitstellung von Mid- und Back-End-Produkten auf Unternehmensebene verwendet wird.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue 2.9, Thinkpad T480-Computer.

Empfohlen: „vue Tutorial“

Ant Design Vue ist eine mit Vue implementierte hochwertige UI-Komponentenbibliothek, die den Designspezifikationen von Ant Design folgt und zur Entwicklung und Bereitstellung von Mid- und Back-End-Produkten auf Unternehmensebene verwendet wird .

Funktionen

werden aus der interaktiven Sprache und dem visuellen Stil von Middle- und Back-End-Produkten auf Unternehmensebene extrahiert.

Hochwertige Vue-Komponenten sofort einsatzbereit.

Teilen Sie das Design-Tool-System „Ant Design of React“.

Unterstützte Umgebungen

Moderne Browser und IE9 und höher (erfordert Polyfills).

Unterstützt serverseitiges Rendering.

Installation

Verwenden Sie npm oder Garn zum Installieren

Wir empfehlen die Verwendung von npm oder Garn für die Entwicklung. Es kann nicht nur problemlos in der Entwicklungsumgebung debuggt, sondern auch sicher in der Produktionsumgebung gepackt und bereitgestellt werden. Die Nutzung des gesamten Ökosystems und der Werkzeugkette bringt viele Vorteile mit sich.

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

Wenn Ihre Netzwerkumgebung nicht gut ist, wird die Verwendung von cnpm empfohlen.

Die Komponentenbibliothek nutzt die neuen Funktionen von Vue: Slot-Scope (neu in 2.5.0), Provide/Inject (neu in 2.2.0)

Browser-Einführung

Verwenden Sie Skript- und Link-Tags, um Dateien direkt in den Browser einzuführen Verwenden Sie die globale Variable andd.

Wir stellen antd.js antd.css und antd.min.js antd.min.css im Verzeichnis ant-design-vue/dist im npm-Release-Paket bereit. Sie können es auch über https://www.jsdelivr.com/package/npm/ant-design-vue oder UNPKG herunterladen.

Es wird dringend davon abgeraten, erstellte Dateien zu verwenden, die nicht bei Bedarf geladen werden können, und es ist schwierig, schnelle Fehlerbehebungsunterstützung für zugrunde liegende abhängige Module zu erhalten.

Hinweis: Sie müssen Moment selbst vorstellen, bevor Sie antd.js vorstellen.

Beispiel

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

Einführung in Stile:

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

Laden bei Bedarf

Mit den folgenden beiden Methoden können nur die verwendeten Komponenten geladen werden.

Verwenden Sie babel-plugin-import (empfohlen).

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

Hinweis: Für Webpack 1 ist keine Einstellung des Bibliotheksverzeichnisses erforderlich.

Dann importieren Sie einfach das Modul aus ant-design-vue, die Stile müssen nicht separat importiert werden. Dies entspricht der manuellen Einführungsmethode unten.

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

Manuell eingeführt

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

Über ant-design-vue

Wie wir alle wissen, wurde Ant Design nach Jahren der Iteration und Akkumulation zu einer Reihe von De-facto-Ideen für das UI-Design Standards sind bei vielen Front-End-Entwicklern und Unternehmen gefragt und beliebt und auch in den Händen von React-Entwicklern eine magische Waffe. Ich hoffe, dass Ant-Design-Vue es Vue-Entwicklern ermöglichen kann, das hervorragende Design von Ant Design zu genießen.

ant-design-vue ist die Vue-Implementierung von Ant Design. Die HTML-Struktur und der CSS-Stil der Komponente sind ebenfalls konsistent Die Komponenten-API ist ebenfalls so konsistent wie möglich.

Ant Design Vue ist bestrebt, Programmierern ein angenehmes Entwicklungserlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonKann Ant-Design-Vue verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!