Vue: from view to view

A lightnight talk for #vuejs Japan. A concept on how to manage your vue files.

Transcript

1. Vue: from view to view Hsiaoming Yang @lepture
2. About Me 0
3. ̣ lepture.com ̣ github.com/lepture ̣ twitter.com/lepture
4. ̣ not skills ̣ no fantasy new features ̣ no cool technology
5. My first view 1
8. vue-hackernews 3 views
9. A deep view 2
10. ̣ python-china.org (qingcheng) ̣ app.xiaotaojiang.com
11. Large Applications vuex + vue-router
13. – Phil Karlton There are only two hard things in Computer Science: cache invalidation and naming things
14. Make Vue Great Again looking
15. ̣ views ̣ components ̣ widgets
16. views 3
17. <router-view> Views are the web pages
18. ̣ Home.vue ̣ Brands.vue ̣ Product.vue ̣ UserProfile.vue <router-view>
19. import Home from ‘./Home.vue’ import UserProfile from ‘./UserProfile.vue’ export default { ‘/’: { title: ‘Ḓᶭ’ component: Home }, ‘/user’: { title: ‘አಁ’ component: UserProfile } } views/index.js
20. import views from ‘./views’ router.map(views)
21. components 4
22. as pure as possible components are just components
23. JUST USER INTERFACE
24. carousel This
25. import Slider from ‘./Slider.vue’ import Avatar from ‘./Avatar.vue’ export default { Slider, Avatar, } components/index.js global
26. widgets 5
27. components must not widgets must communicate with servers
29. ̣ <a-component> in <a-widget> ̣ <a-component> in <b-component> ̣ <a-widget> in <a-component>
30. <script> import CartItem from ‘./CartItem.vue’ export default { components: { CartItem } } </script> views/Home.vue
31. App.vue 6
32. ̣ Entry Point ̣ Belongs to nothing ̣ A special vue file
33. App.vue views/ components/ widgets/
34. maintainablevue.com recap
35. About this slide Noteworthy Optima Impact Color Patterns Main Fonts
36. vui.github.io AD
37. THX