Bartosz Magier: Klienci czasem wymagają od nas zawrotnej prędkości w tworzeniu aplikacji. Pewnie nieraz zetknęliście się z problemem stworzenia funkcjonalnego prototypu, który klient może zobaczyć, w którym może poklikać – bo same makiety i grafiki mu nie wystarczają. Na prezentacji dowiecie się, czym jest VueJS, jak szybko przy jego pomocy można tworzyć funkcjonalne prototypy oraz poznacie zalety Vue CLI 3.

1. Szybkie
prototypowanie
i development
we Vue.js
© 2018 Bartosz Magier
Uszanowanko Programowanko #34

2. 2
Cześć, ja nazywam się
Bartosz Magier
Designer & Front End Developer
bartosz.magier@tsh.io

3. 3
Co to będzie?
▹ Wprowadzenie do Vue.js
▹ Czym jest Vue CLI 3 oraz
jak go wykorzystać?
▹ Demo
▹ Pytania
3

4. 1.
Czym jest Vue.js?
Zacznijmy od podstaw

5. 5
1. Czym jest Vue.js?
Wprowadzenie
▹ Framework JavaScript
▹ ...który jest progresywny
▹ ...oraz posiada rozbudowany
ekosystem oficjalnych bibliotek
i narzędzi

6. 6
1. Czym jest Vue.js?
Ekosystem
Biblioteki
▹ Vuex
▹ Vue Router
▹ Vue SSR
Narzędzia
▹ Vue Loader
▹ Vue Devtools
▹ Vue CLI

7. 7
1. Czym jest Vue.js?
Ekosystem / Vuex
▹ Zarządzanie stanem aplikacji
▹ Biblioteka oraz wzorzec uszyty
specjalnie dla Vue
▹ Inspirowany architekturą Flux
▹ Single Source of Truth

8. 8
Vuex
<UserList/>
KOMPONENT
SET_USERS()
MUTACJA
fetchUsers()
AKCJA
users: [...]
STAN APLIKACJI
SERWER API

9. export default {
state: {
message: 'Hello world!',
},
setMessageAction(newValue) {
this.state.message = newValue;
},
clearMessageAction() {
this.state.message = '';
},
};
9

10. import store from './store';
var component = new Vue({
data () {
return {
sharedState: store.state
}
},
methods: {
handleSetMessage (message) {
store.setMessageAction(message);
}
}
});
10

11. 11
1. Czym jest Vue.js?
Ekosystem / Vue Loader
▹ Loader do Webpacka
▹ Single File Component (SFC)
▹ Hot Reloading z zachowaniem
stanu

12. <template>
...
</template>
<script>
...
</script>
<style>
...
</style>
12

13. <template>
<div class="hello">
{{ greeting }} World!
</div>
</template>
13

14. <script>
export default {
data () {
return {
greeting: 'Hello'
}
}
}
</script>
14

15. 15
<style scoped>
.hello {
font-size: 2rem;
text-align: center;
}
</style>

16. <template>
...
</template>
<script>
...
</script>
<style>
...
</style>
16

17. <docs lang="md">
# MyButton
## Description
Standard button used across the application.
## Usage
<MyButton color="primary">Click Me!</MyButton>
</docs>
17

18. <i18n lang="yaml">
---
en:
hello-world: Hello World!
pl:
hello-world: Cześć Świecie!
cn:
hello-world: 你好世界
</i18n>
18

19. 2.
Czym jest Vue CLI?
Poznajcie bohatera!

20. “
Vue CLI is a full
system for rapid
Vue.js development
20

21. 21
2. Czym jest Vue CLI?
Potężne narzędzie
▹ Scaffolding
▹ Serwowanie oraz budowa
▹ Szybkie prototypowanie

22. 22
Vue CLI 3
CLI
CLI Service CLI Plugins

23. 23
2. Czym jest Vue CLI?
CLI Service
▹ Lokalny pakiet
▹ Zarządza Webpackiem
▹ Pozwala serwować oraz budować
▹ Eject nie jest konieczny

24. 24
2. Czym jest Vue CLI?
CLI Plugins
▹ Modyfikują konfigurację webpacka
▹ Składają się z:
￭ Generatora
￭ Runtime Plugin-u
▹ Można je łączyć tworząc presety

25. 3.
Jak wykorzystać
Vue CLI?
Prototypowanie oraz
development

26. 3. Jak wykorzystać Vue CLI?
Instant prototyping
▹ Zero konfiguracji
▹ Z dowolnego miejsca na dysku
▹ Pozwala serwować oraz budować
▹ Wymaga zainstalowania
globalnie cli-service-global
26

27. vue serve
27

28. 28

29. 29

30. # main.js, index.js, App.vue lub app.vue
vue serve
vue serve MyComponent.vue
vue build MyComponent.vue
30

31. 31
Demo

32. 3. Jak wykorzystać Vue CLI?
Tworzenie projektu
▹ Kreator prowadzi nas po kolei
przez kolejne kroki
▹ Wybraną konfigurację możemy
później modyfikować
▹ Możemy też zarządzać projektami
z poziomu przeglądarki
32

33. 33
Demo

34. 34

35. 35

36. 36

37. Dziękuję!
Macie pytania?
Znajdziecie mnie tutaj:
bartosz.magier@tsh.io
37

38. Uszanowanko Programowanko
PRZYDATNE LINKI
▹ https://vuejs.org/v2/guide/
▹ https://cli.vuejs.org/
▹ https://vuex.vuejs.org/
▹ https://router.vuejs.org/
▹ https://vue-loader.vuejs.org/
▹ https://github.com/vuejs/awesome-vue
38