Heim  >  Artikel  >  Web-Frontend  >  Ist antd für die Verwendung mit Vue geeignet?

Ist antd für die Verwendung mit Vue geeignet?

藏色散人
藏色散人Original
2021-02-02 10:36:265566Durchsuche

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.

Ist antd für die Verwendung mit Vue geeignet?

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.pngIst antd für die Verwendung mit Vue geeignet?

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 &#39;ant-design-vue/lib/button/style/css&#39;
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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn