Verwendung von Vue 2.0-Komponenten in einer Winkelanwendung

Wir wurden kürzlich mit der Entwicklung eines UI-Kits beauftragt, das als globaler Styleguide für unsere Produkte verwendet werden kann. Teil dieses Prozesses war die Auswahl eines Frameworks mit Datenbindungsfunktionen für die Entwicklung unserer interaktiven Widgets. Glücklicherweise war es keine große Herausforderung, eine zu finden, da wir eine Vielzahl von Optionen zur Auswahl hatten, darunter Angular, React, Knockout usw.

Lange Rede, kurzer Sinn, wir haben uns schließlich mit Vue aufgrund seiner leichten Quelle, der hohen Leistung und der brillanten Dokumentation mit leicht verständlichen Beispielen abgefunden. Was wir jedoch sicherstellen mussten, war die Flexibilität, sich in andere Frameworks zu integrieren. Da unsere Webanwendungen in Angular erstellt wurden, war es von größter Bedeutung, dass Vue keine größeren Rückschläge verursachte.

Glücklicherweise ergab diese Untersuchung die gewünschten Ergebnisse und ich werde Ihnen mitteilen, wie Sie bereits implementierte Vue-Komponenten in einer Angular-App wiederverwenden können, ohne Ihre Komponenten neu zu schreiben!

1. Holen Sie sich den Quellcode und richten Sie Ihre Seite ein

Für dieses Tutorial empfehle ich, jsfiddle oder plunkr zu öffnen, nur um loszulegen. Beginnen wir mit dem Hinzufügen unserer Abhängigkeiten zu unserer HTML-Seite zwischen dem öffnenden und schließenden -Element oder direkt nach dem öffnenden -Tag: