Vue: from view to view

Vue: from view to view

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

83a5c46f52b4835e6048159bfa85478e?s=128

Hsiaoming Yang

May 31, 2016
Tweet

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

  6. None
  7. None
  8. vue-hackernews 3 views

  9. A deep view 2

  10. ̣ python-china.org (qingcheng) ̣ app.xiaotaojiang.com

  11. Large Applications vuex + vue-router

  12. None
  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

  28. None
  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