Adapter-Template mit Vue.js und Quasar
-
Ich habe auf Github ein neues Repo mit einem Adapter-Template angelegt. Das Template basiert auf Vue.js und Quasar und ist durch adapter-react von Bluefox inspiriert.
Das ganze Socket-Handling habe ich dabei von Bluefox übernommen und auf das Framework angepasst. Ihr habt jetzt also auch die Möglichkeit neben React mit Vue.js und Quasar Admin-GUI's für eure Adapter zu entwickeln, dabei kommt auch Vuex als State-Store zum Einsatz. Schaut es euch einfach mal an und gebt mir gerne ein Feedback.
-
Hey Carsten, super Sache, vielen Dank hierfür
Echt witzig, hab vorhin nach ein paar Implementierungen für besseres Adapter-Admin gegoogelt, dann auf Vue gestoßen, und google hat mich direkt hierher geführt in deinen so frischen Beitrag hier.
Hab es mal schnell unter Windows (Entwicklungsrechner) nach deiner Anleitung gemacht und läuft soweit wohl
Kannst du bitte noch kurz einen Hinweis geben, wo man jetzt startet. Also welche Datei man bearbeitet. Diese hier, oder?
c:\iobroker\node_modules\ioBroker.template-vue\template-vue-admin\src\index.template.html -
@Mic Ich weiß jetzt nicht ob Du schon mit Vue.js und Quasar vertraut bist, deswegen mal meine Empfehlungen, um in das Thema richtig einzusteigen.
Auf YouTube gibt es einige wirklich gute Videos, die einem helfen sich schnell zurechtzufinden.
-
Vue.js -> The Vue Tutorial for 2018 - Learn Vue 2 in 65 Minutes und natürlich die Vue.js-Seite.
-
Quasar -> Quasar Vue.js Tutorial - Getting Started und Quasar Framework: Vue.js Cross Platform App und auch die hervorragende Doku von Quasar Framework.
Als Entwicklungsumgebung kann ich Dir WebStorm (nutze ich selbst), oder auch Visual Studio Code empfehlen. Atom als etwas schmalere Lösung tut es natürlich auch.
Zu Deiner konkreten Frage: index.template.html ist nicht der Einstiegspunkt für die Entwicklung. Du kannst hier zwar Änderungen vornehmen, dass ist aber so gut wie nie erforderlich. Das Quasar-Projekt für den Admin findest Du unter template-vue-admin. Die Dateien mit denen Du in der Regel arbeitest sind unter template-vue-admin/src zu finden. Unter pages findest Du die beiden Seiten Adressen.vue und Home.vue. Änderungen die Du hier vornimmst sind auch sofort sichtbar, wenn Du die Entwicklungsumgebung (quasar dev) gestartest hast.
Wichtig ist noch, dass Du immer in Deinem Development-Ordner im Verzeich iobroker.template-vue arbeitest und wie in der Anleitung auf Github beschrieben dann mit npm link den Link richtig nach iobroker/node-modules setzt. Niemals im iobroker/node-modules Verzeichnis direkt entwickeln. Das mag npm und auch webpack gar nicht und kann zu bösen Seiteneffekten führen, wenn Du z.B. mit quasar build das admin-Verzeichnis erzeugst.
Ich hoffe das hilft Dir erstmal weiter, ansonsten einfach Fragen.
-
-
@carsten04 Kannst du irgendwo (z.B. hier oder als Issue auf Github) zusammenfassen, was man alles über das Standard-Template hinaus benötigt, um das zu nutzen?
Mit den Informationen könnte man es z.B. in create-adapter und damit in die Template-Repos einbauen. -
@AlCalzone Bin gerade auch in der Teamsession. Ist wirklich super spannend und interessant. Issue kommt am WE.
-
@AlCalzone Hast Du mal auf Github geschaut? Da habe ich kurz beschrieben wie Du das Template installieren musst. Fehlt Dir da noch was?
-
@carsten04 Jein... Ich muss (wenn Vue statt HTML+CSS verwendet werden soll) zum Teil bestehende Dateien anfassen, manche aus dem Output entfernen, manche hinzufügen. Denke du hast da mehr Überblick, was genau geändert wurde.
Außerdem wäre es schön, wenn man nicht in mehreren Ordner package.json pflegen muss - geht das? Meine react-Adapter haben das z.B. nicht. -
@AlCalzone Ich schreibe Dir dann am WE was sich alles geändert hat. Ist aber wirklich überschaubar.
-
@carsten04
Vielen Dank für deine ausführliche Antwort, sehr hilfreich! Ok, ich werde mir mal Zeit einplanen, um das in Ruhe anzugehen, bringt sonst nichts.
Meine Entwicklungsumgebung ist übrigens VS Code. Kostenlos und ich komme damit sehr gut zurecht für die Adapter-Entwicklung. -
@AlCalzone Hallo AlCalzone bin erst jetzt zum Überarbeiten gekommen. Es gibt jetzt nur noch eine package.json. Geändert hat sich eigentlich nur package.json, io-package.json. Hinzugekommen ist der src-Folder (das Quasar-Projekt) und der public-Folder und der admin-Folder ist entfallen (wird mit quasar build erzeugt). Mehr ist es eigentlich nicht. Wenn Du Vue mit Quasar in die Templates integrieren könntest wäre das super.
React ist ohne Zweifel auch super, aber ich bin der Meinung, das gerade bei kleinen Admin-UI's die Lernkurve bei Vue mit Quasar sehr viel geringer ist. So wie ich Quasar integriert habe, kann man eigentlich sofort loslegen und bekommt sehr ausgereifte Komponenten out of the box vom Quasar-Framework bereitgestellt.Grüße
Carsten -
Hat schon mal jemand mit dem template erste Erfahrungen sammeln können, oder gibt es hier etwa keine Vue-Fans. Kann ich mir gar nicht vorstellen
