![Projekt anlegen
• vue create [porject name] -> Aufbau eines neuen Projekts mit
Template
WICHTIG!!!](https://image.slidesharecdn.com/vuejs-191016193158/75/workshop-vue-js-23-2048.jpg?cb=1671610909)
Workshop Vue js
•1 recomendación•524 vistas
Denunciar
Compartir
Descargar para leer sin conexión
Diese Folien behandeln alle wichtigen Bestandteile von Vue JS. Sie sind Ausgangspunkt für einen Ein-Tages-Workshop.
Más contenido relacionado
La actualidad más candente
La actualidad más candente(20)
Similar a Workshop Vue js
Similar a Workshop Vue js(20)
Más de Hendrik Lösch
Más de Hendrik Lösch(20)
Workshop Vue js
- 1. EINSTIEG IN DAS VUENIVERSE Graphic by Freepik
- 2. Der Sprecher Hendrik Lösch Senior Consultant & Coach Hendrik.Loesch@saxsys.de @HerrLoesch Hendrik-Loesch.de
- 4. Web Front-End Entwicklung heute
- 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
- 10. Quellen https://github.com/HerrLoesch/VueJS-Workshop Ausgangssituation Endergebnis mit allen Einzelschritten als Commits
- 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. ✔️
- 14. Die Kontrahenten Ursprünglicher Release 2010 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 Core Member • ca. 210 000$ per Patreon pro Jahr • ca. 102 000$ per OpenCollective pro Jahr Stand Juni 2019
- 16. NPM Downloads
- 19. Zukunftsfähigkeit • Unterstützung für alle ES5 compliant Browser. • Einsatz neuster JavaScript Features. Quelle: http://kangax.github.io/compat-table/es5/
- 20. Installation & Projekt Setup
- 21. Vue installieren • npm installieren • npm install -g vue • npm install -g @vue/cli
- 22. Vue UI
- 23. Projekt anlegen • vue create [porject name] -> Aufbau eines neuen Projekts mit Template WICHTIG!!!
- 24. Projekt anlegen
- 28. Debugging aktivieren Danach Webserver neu starten! (npm run serve)
- 30. Vuetify
- 31. Vuetify
- 34. Vuetify Plugin • vue add vuetify
- 35. Vuetify • <v-app> … </v-app> in App.vue template einfügen
- 37. Aufbau einer Vue Datei Müssen gleich sein
- 38. Komponenten referenzieren Geschweifte Klammern!!! Müssen gleich sein
- 40. Daten einer Komponente Verbreitete Schreibeweise Lange Schreibeweise
- 42. Eigenes Datenmodel für die UI
- 43. Schleifen
- 44. Props in einfach
- 45. Binding (an props) Kindkomponenten sollten die Props nicht verändern!!!
- 47. Props in komplex
- 49. Grundstruktur
- 50. Das Gridsystem von Vuetify 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. v-model Ist das Gleiche wie
- 54. Suche per Button-Click – das Script
- 55. Template der Suche ohne Button
- 56. Suche als Methode Funktioniert bestenfalls 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. Watchers vs. 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. Transitions
- 61. Transitions
- 63. Lifecycle Hooks & Datenabfrage
- 65. Backend abfragen mit Fetch und async/await
- 66. Daten konvertieren in internes Model
- 68. Jest
- 69. Simpler Unit Test Name der Property der zu testenden Komponente! Möglicherweise tritt dieser Fehler auf:
- 72. Service in der Komponente konsumieren
- 73. Async Unit Test mit Mocks • https://alexjover.com/blog/test-methods-and-mock-dependencies-in- vue-js-with-jest/
- 76. VueJS Router • npm install vue-router --save Neue Datei router.js anlegen In main.js referenzieren
- 77. Route aufbauen
- 79. Navigation auslösen imperativ Globale Variable Replace geht auch Dann hat man keine History
- 80. Parameter auslesen & Go Back „route“ nicht „routeR“!!! Ein Schritt zurück.
- 82. Parameter einer Property zuweisen Achtung: Die Ziehung muss natürlich auch übergeben werden!
- 83. Query Parameter schreiben und auslesen localhost:8080/#/drawingDetails/42 Query Parameter erlauben es zusätzliche Daten zu übergeben.
- 85. Zentrale Datenhaltung mit Vuex 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 npm install vuex --save
- 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
- 94. Komplexe Umgebungen Siehe:https://github.com/HerrLoesch/vlingo-auth-ui/tree/master/src/store Man sollte nicht zu viel in die Stores packen….
- 96. Basisstruktur Detailansicht Ladekreis anzeigen wenn keine Daten gesetzt sind
- 97. mit Formular
- 98. mit Formular Zugriff auf alle refs über deren Namen. Auslösen des Saved Events
- 100. Build npm run build Lieber al-a-carte components nutzen (vuetify)
- 101. Dev Tools
Notas del editor
- Wir konzentrieren uns vor allem auf VueJS!!!