Heim > Artikel > Web-Frontend > Ist antd für die Verwendung mit Vue geeignet?
antd ist für Vue geeignet, da Ant Design eine Vue-Version hat und der entsprechende Name „ant-design-vue“ lautet. Im Vue-Projekt können Sie „npm i --save ant-design-vue“ verwenden. Befehl, um es zu installieren und zu verwenden.
Die Betriebsumgebung dieses Artikels: Windows7-System, Vue2.0-Version, Dell G3-Computer.
Die Vue-Version von Ant Design – Einführung in Ant-Design-Vue
Ant-Design-Vue ist die einzige von Ant Design offiziell empfohlene UI-Komponentenbibliothek der Vue-Version. Es handelt sich tatsächlich um die Vue-Implementierung von Ant Design. Komponenten Der Stil ist mit Ant Design synchronisiert, und die HTML-Struktur und der CSS-Stil der Komponente sind ebenfalls konsistent. Nachdem ich es verwendet hatte, stellte ich fest, dass es tatsächlich eines der wenigen vollständigen Projekte zur Integration von VUE-Komponentenbibliotheken und Entwicklungslösungen ist.
Offizielle Website:
https://www.antdv.com/docs/vue/introduce-cn/
Vorteile:
Extrahiert aus der interaktiven Sprache und dem visuellen Stil von Mid- und Back-End-Produkten auf Unternehmensebene .
Hochwertige Vue-Komponenten sofort einsatzbereit.
Teilen Sie das Design-Tool-System „Ant Design of React“.
Globale Einführung von ant-design-vue
1. Erstellen Sie zunächst ein Vue-Projekt mit dem Gerüsttool vue-cli
2. Installieren Sie ant-design-vue
Verwenden Sie das Befehlszeilentool und wechseln Sie zum Projektpfad. Verwenden Sie zum Installieren den Befehl [npm i --save ant-design-vue], wie unten gezeigt
1.png
3. Globale Einführung
(1) Vollständige Einführung
main.js Globale Einführung und Registrierung
import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' Vue.use(Antd)
Es ist nicht nötig, registrierte Komponenten auf der Seite einzuführen, Sie können alle Komponenten direkt verwenden
<template> <div> <a-button type="primary">hello world</a-button> </div> </template> <script> export default {} </script>
(2) Importieren Sie einige Komponenten
In main.js importieren und registrieren Sie die Komponenten, die im Projekt verwendet werden müssen
import { Button } from "ant-design-vue"; import 'ant-design-vue/lib/button/style/css' Vue.component(Button.name, Button)
Sie können sie direkt im Projekt verwenden. Verwenden Sie diese registrierte Komponente
<template> <div> <a-button type="primary">hello world</a-button> </div> </template> <script> export default {} </script>
Empfohlen: „vue-Tutorial“
Das obige ist der detaillierte Inhalt vonIst antd für die Verwendung mit Vue geeignet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!