Hinzufügen von vueJS zu einer bestehenden Winkelapplikation

Ich habe eine existierende Winkelapplikation und ich möchte beginnen, einige davon in eine vueJS-Anwendung zu ändern.Hinzufügen von vueJS zu einer bestehenden Winkelapplikation

Meine Anwendung, im Dev-Modus, lädt alle Skripte in der Haupt-HTML-Datei (im Produktionsmodus ist es in app.js gebündelt, aber ich möchte den Test in den Entwicklermodus starten).

Ich möchte auf den Zustände ändern vue zu verwenden, so dass ich lese es in der folgenden Art und Weise möglich ist: https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9

Ich möchte jedoch eine .vue Dateien Syntax verwenden, und ich weiß nicht, ob das ist, möglich, ohne Webpack oder einen anderen Bundler im Dev-Modus zu verwenden.

Also meine Frage ist - Ist das möglich? Kann ich .vue-Dateien in meiner ng-App mit den aktuellen Konfigurationen verwenden? Außerdem gibt es eine nette Möglichkeit, nur die Vue-Dateien und Komponenten zu webpacken (obwohl ich sie im Inneren initialisieren muss und Winkel-Controller, wie es scheint).

Wenn es gute Tutorials zum Hinzufügen von Vue in eckige App gibt, würde ich gerne sie bekommen, da ich es versäumt habe, gute zu finden.

Dank

Quelle

2017-10-30 Rotem B

'.vue' Dateien sind ein Format, das von' vue-loader' verwendet wird, einem npm-Paket, das speziell für Webpacks entwickelt wurde. Also, wenn Sie '.vue' Dateien verwenden wollen, bin ich ziemlich sicher, dass Sie Webpack benötigen. – thanksd

so schwer sein könnte, weil der Bau für den vue Code grundsätzlich eine separate Anwendung sein wird.

Eine Sache, die Sie tun könnten, ist, sie als völlig verschiedene parallele Anwendungen zu bauen, zwei Build-Schritte zu verwenden, zwei javscript-Dateien einzuschließen und dann window.postMessage zu verwenden, um zwischen den beiden zu kommunizieren.

So zum Beispiel Ihre aktuelle Anwendung wird zu einem Punkt kommen, wo eine bestimmte div Vue-Code anstelle von Winkel enthalten soll. Sie könnten dann eine Nachricht von Ihrem Winkel Code veröffentlichen, die vue App zu sagen in diesem div zu laden, zB:

window.postMessage({ app: 'vue', bind: '#vue-content' })

Die vue App, anstatt auf DOMContentReady der Bindung an Fenster Ereignisse hören würde, und binden dann an die Element erhält es. Es würde dann zurück zur Host-App kommunizieren, indem auch Nachrichten gepostet werden. Dies würde sie ziemlich getrennt halten und Ihnen erlauben, sie unabhängig zu bauen.

Quelle

2017-10-30 14:37:52

Ich muss sagen, ich mag diese Idee. Gab mir auch Inspiration für unser Migrationsprojekt! – Dieterg

Danke Justin! Zwei Fragen - zuerst, würdest du das tun? Würden Sie versuchen, Vue in eine bestehende und ziemlich große eckige Anwendung zu integrieren? Zweitens, irgendwelche Gedanken über ngVue? –

Ich habe ngVue überhaupt nicht angeschaut, aber wenn jemand schon etwas Arbeit für Sie erledigt hat, dann können Sie es sich auch mal anschauen. Und in Bezug darauf, es überhaupt zu tun ... es scheint riskant, und ich würde es wahrscheinlich eher nicht tun, aber wenn Sie sich keinen besseren Weg vorstellen können, sich vom alten Winkel zu lösen, wäre ich sehr versucht. –

ngVue Mitglied hier :)

Bei Dawex (die Firma, die ich an mich arbeiten), verwenden wir Vue innerhalb einer großen AngularJS Anwendung, mit ngVue. Es ist seit mehreren Monaten in Produktion und es funktioniert sehr gut. Weitere Informationen zu diesem Artikel, den ich vor dem letzten Sommer schrieb, finden Sie unter: https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8. Ich hoffe, das hilft!

Quelle

2017-11-22 16:54:27

Hinzufügen von vueJS zu einer bestehenden Winkelapplikation

Antwort

Verwandte Themen