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!