A brief introduction to Vue.js and how to incrementally enchant your UI.
! Frontend on SteroidsWith Vue.js1
View Slide
Was ist Vue.js ?2
A progressive,incrementally-adoptableJavaScript framework forbuilding UI on the web.1Github Beschreibung3
Warum?4
Vorteile4 Sehr einfach zu erlernen4 Starten ohne viel Konfiguration4 Flexibel einsetzbar4 Modular4 "Choice driven"4 Klein & schnell (28.03kb min+gzip)5
⚡ Quickstart6
Auch ohne Build Pipeline einsetzbar:Ansonstenyarn add vueBesseryarn add -g vue-cli7
2 Bestandteile8
Scriptconst app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})9
Template:{{ message }}10
Single File Components11
Single File Components4 Inspiriert von Web Components4 *.vue Endung4 Template4 Script4 Styling12
Hello.vue13
! Vorteile14
4 Kleine modulare Komponenten4 Shareable4 Saubere Kommunikation über props und events4 Testbar15
! vue-cli16
4 Scaffold für Vue Projekte4 Optionen für4 vue-router4 eslint4 Unit Tests mit karma4 E2E Tests mit nightwatch17
18
! Demo19
Weitere Features4 Methods4 Computed properties4 Filters4 Mixins4 Directives4 Props20
! Code Splitting21
22
IntegrationIn bestehende System23
24
4 Weniger Code4 Inkrementell erweiterbar4 Kleine ersetzbare Komponenten11 https://about.gitlab.com/2016/10/20/why-we-chose-vue/25
Think Big26
Große Projektesind komplex27
! State Management28
vuex29
Besteht aus4 State4 Mutations4 Actions4 Getters4 Modules30
!31
JSX32
33
! Render functions34
35
reduxtypescript36
TestingJestAvaKarma37
Community38
! Fragen?@apertureless[email protected]39