Vue3 (Teil 2) Integration von Ant Design Vue

Im vorherigen Artikel haben wir vorgestellt, wie man mit Vue3 ein Vue CLI-Projekt erstellt (Teil 1). Als Nächstes werden wir den Inhalt des folgenden Artikels basierend auf dem vorherigen Artikel weiter ausbauen.

1. Integrieren Sie Ant Design Vue

SQL:

npm installiere [email protected] --save

Kompatibilität:

Ant Design Vue 2.x unterstützt alle modernen Browser.

Wenn Sie IE9+ unterstützen müssen, können Sie Ant Design Vue 1.x & Vue 2.x verwenden.

Für Browser der IE-Reihe ist Unterstützung für Polyfills wie es5-shim und es6-shim erforderlich.

2. Verwendung von Komponenten

Offizielle Website-Adresse: https://2x.antdv.com/docs/vue/getting-started-cn

1. Vollständiges Zitat

Ändern Sie den Inhalt in main.ts wie folgt:

ts
importiere { createApp } aus „vue“;
importiere Antd von „Ant-Design-Vue“;
App aus „./App.vue“ importieren;
importiere „ant-design-vue/dist/antd.css“;
Router aus „./router“ importieren;
Store aus „./store“ importieren;
//Der Vorteil ist, dass es einfach zu entwickeln ist, aber der Nachteil ist, dass die Datei beim Verpacken größer wird (aber das hat keine Auswirkungen)
createApp(App).verwenden(speichern).verwenden(Router).verwenden(Antd).mount('#app')

2. Komponentenreferenz

Nach dem vollständigen Import können wir die Komponenten problemlos verwenden. Wenn Sie zuvor Vue2.0 oder Element UI verwendet haben, geht es relativ schneller.

3. Beispiele für die Verwendung von Komponenten

Fügen wir der home eine Schaltfläche hinzu, wie unten gezeigt:

1. Wir nehmen Änderungen auf der Homepage vor

HTML:

<Vorlage>
  <div Klasse="Startseite">
    <a-button type="primary" danger>Primär</a-button>
    <img alt="Vue-Logo" src="../assets/logo.png">
    <HelloWorld msg="Willkommen bei Ihrer Vue.js + TypeScript-App"/>
  </div>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von „vue“;
importiere HelloWorld von '@/components/HelloWorld.vue'; // @ ist ein Alias ​​für /src

exportiere StandarddefiniereKomponente({
  Name: "Home",
  Komponenten:
    Hallo Welt,
  },
});
</Skript>

2. Starten Sie den Dienst neu, um den Effekt zu sehen

Doppelklicken Sie server , um ihn zu starten und die Ergebnisse wie unten dargestellt anzuzeigen:

IV. Fazit

Dies ist das Ende dieses Artikels über die Integration Vue3 mit Ant Design Vue . Weitere relevante Inhalte zur Integration von Vue3 mit Ant Design Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!