14-mal heruntergeladen
![Projekt anlegen
• vue create [porject name] -> Aufbau eines neuen Projekts mit
Template
WICHTIG!!!](https://image.slidesharecdn.com/vuejs-191016193158/85/Workshop-Vue-js-23-320.jpg)
Hochgeladen vonHendrik Lösch
Workshop Vue js
Das Dokument beschreibt einen Workshop zur Einführung in Vue.js, der die Grundlagen, Komponenten, Architektur und das Ökosystem von Vue.js behandelt, einschließlich Themen wie SPA und PWA. Es bietet auch Informationen zur Installation, Projektstruktur, Verwendung von Vuetify, Router und Vuex sowie zu Testmethoden und der Verwaltung von Zustand in der Anwendung. Ziel ist es, die Teilnehmer in die Lage zu versetzen, Vue.js effektiv zu nutzen und zu verstehen.
Workshop Vue js
- 1. EINSTIEG IN DASVUENIVERSE Graphic by Freepik
- 2. Der Sprecher Hendrik Lösch SeniorConsultant & Coach Hendrik.Loesch@saxsys.de @HerrLoesch Hendrik-Loesch.de
- 4.
- 6.
- 7. Single Page Applications& Progressive Web Applications • Responsive • „Unabhängig“ vom Back-End • Status wird im Client gehalten • Statuswechsel nicht für Nutzer spürbar • Anbindung verschiedener entkoppelter Dienste • Offlinefähigkeit & Nutzung von Hintergrunddiensten (PWA)
- 8. Ziele des Workshops •Vue JS kennen lernen • Vue JS nutzen können • Einblick in das Ökosystem bekommen • Vuetify • Router • Vuex • Plugins • Tests schreiben können • Architektur • SPA & PWA Grundlagen verstehen • ES6 lernen • CSS lernen • Webpack verstehen • npm verstehen
- 9.
- 10. Quellen https://github.com/HerrLoesch/VueJS-Workshop Ausgangssituation Endergebnis mit allenEinzelschritten als Commits
- 11.
- 12. Bottom Up vs.Top Down Bottom Up Ausgehend vom Back-End werden die Schichten von unten nach oben aufgebaut Testgetrieben Top Down Ausgehend von der UI wird bis zur Kommunikationsschicht gearbeitet. Dadurch entstehen potentiell weniger Tests. ✔️
- 13.
- 14. Die Kontrahenten Ursprünglicher Release2010 2013 2014 Website angular.io reactjs.org vuejs.org Lizenz MIT MIT MIT Verwendet von Google, Microsoft Facebook, Uber Alibaba, Apple Größe (komprimiert und verkleinert) 563kB 100kB 33,kB https://madewithangular.com/ https://madewithreact.com/ https://madewithvuejs.com/
- 15. Organisationsform • 20 CoreMember • ca. 210 000$ per Patreon pro Jahr • ca. 102 000$ per OpenCollective pro Jahr Stand Juni 2019
- 16.
- 17.
- 18.
- 19. Zukunftsfähigkeit • Unterstützung füralle ES5 compliant Browser. • Einsatz neuster JavaScript Features. Quelle: http://kangax.github.io/compat-table/es5/
- 20.
- 21. Vue installieren • npminstallieren • npm install -g vue • npm install -g @vue/cli
- 22.
- 23. Projekt anlegen • vuecreate [porject name] -> Aufbau eines neuen Projekts mit Template WICHTIG!!!
- 24.
- 25.
- 26.
- 27.
- 28. Debugging aktivieren Danach Webserverneu starten! (npm run serve)
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. Vuetify Plugin • vueadd vuetify
- 35. Vuetify • <v-app> …</v-app> in App.vue template einfügen
- 36.
- 37. Aufbau einer VueDatei Müssen gleich sein
- 38.
- 39.
- 40. Daten einer Komponente VerbreiteteSchreibeweise Lange Schreibeweise
- 41.
- 42. Eigenes Datenmodel fürdie UI
- 43.
- 44.
- 45. Binding (an props) Kindkomponentensollten die Props nicht verändern!!!
- 46.
- 47.
- 48.
- 49.
- 50. Das Gridsystem vonVuetify Bug Kurzform des Bindings
- 51. Erweiterte Interpolation &styling Padding (vuetify) Title von vuetify
- 52. Suche per Button-Click– das Template Event Binding Two-Way Binding Key binding
- 53.
- 54. Suche per Button-Click– das Script
- 55. Template der Sucheohne Button
- 56. Suche als Methode Funktioniertbestenfalls einmal, der Rückgabewert wird gecacht!
- 57. Suche als „watcher“Eigenschaft Gleicher Name wie die zu überwachende Eigenschaft.
- 58. Suche als „computed“Eigenschaft Computed wird ausgeführt sobald die referenzierten Eigenschaften sich ändern. Andernfalls Wird der gecachte Wert verwendet. Im Standardfall gibt es nur Getter, man kann aber auch Setter anlegen.
- 59. Methods vs. Watchersvs. Computed Properties Props Methods Watchers Computed Setter Nur von außen Ja Nein Ja Getter Ja Ja Nein Ja Caching Ja Ja Nein Ja Wird ausgelöst durch Setzen eines Wertes der Komponente vom Parent. Call Wertänderung einer Eigenschaft Call & Wertänderung an n Eigenschaften Hauptzweck Werte an Komponenten übertragen Funktionalität ausführen Funktionalität bei Wertänderung ausführen. Werte abhängig von anderen Werten bereitstellen. Kosten Gering Abhängig von der Funktionalität Hoch Mittel
- 60.
- 61.
- 62.
- 63. Lifecycle Hooks &Datenabfrage
- 64.
- 65. Backend abfragen mitFetch und async/await
- 66. Daten konvertieren ininternes Model
- 67.
- 68.
- 69. Simpler Unit Test Nameder Property der zu testenden Komponente! Möglicherweise tritt dieser Fehler auf:
- 70.
- 71.
- 72. Service in derKomponente konsumieren
- 73. Async Unit Testmit Mocks • https://alexjover.com/blog/test-methods-and-mock-dependencies-in- vue-js-with-jest/
- 74.
- 75.
- 76. VueJS Router • npminstall vue-router --save Neue Datei router.js anlegen In main.js referenzieren
- 77.
- 78.
- 79. Navigation auslösen imperativ GlobaleVariable Replace geht auch Dann hat man keine History
- 80. Parameter auslesen &Go Back „route“ nicht „routeR“!!! Ein Schritt zurück.
- 81.
- 82. Parameter einer Propertyzuweisen Achtung: Die Ziehung muss natürlich auch übergeben werden!
- 83. Query Parameter schreibenund auslesen localhost:8080/#/drawingDetails/42 Query Parameter erlauben es zusätzliche Daten zu übergeben.
- 84.
- 85. Zentrale Datenhaltung mitVuex https://vuex.vuejs.org/
- 86. Services != Stores Problem:Der Status ist überall verteilt oder muss immer direkt in das Back-End übertragen werden. Lösung: Man fasst den Status und all seine Transformationen in einem eigenen Modul zusammen.
- 87. Store – Vuex npminstall vuex --save
- 88.
- 89.
- 90. Store anbinden –Laden anzeigen drawingSearch.vue
- 91. Store anbinden –der lange weg drawingSearch.vue
- 92. Store anbinden –der kurze Weg drawingSearch.vue Geschweifte Klammern!!! Mixin
- 93.
- 94. Komplexe Umgebungen Siehe:https://github.com/HerrLoesch/vlingo-auth-ui/tree/master/src/store Man sollte nichtzu viel in die Stores packen….
- 95.
- 96. Basisstruktur Detailansicht Ladekreis anzeigen wennkeine Daten gesetzt sind
- 97.
- 98. mit Formular Zugriff aufalle refs über deren Namen. Auslösen des Saved Events
- 99.
- 100. Build npm run build Lieberal-a-carte components nutzen (vuetify)
- 101.
Hinweis der Redaktion
- #5 Wir konzentrieren uns vor allem auf VueJS!!!