Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VueJS 大型專案架構

VueJS 大型專案架構

#假的

3e6a21d5e1bc2d8371d17233338017c0?s=128

Cain Chen

July 13, 2016
Tweet

Transcript

  1. #؃ጱ य़ࣳ䌕礯蚏ಋୗ VueJS

  2. Kuro Hsu http:/ /goo.gl/m8wuEQ ፡ਠ蝡㮆疰ݢ犥ૢ旉櫝樄 筕വ

  3. Agenda VueJS च๜Օ奧 VueJS 疩獈䌕礯 Vuex Vue Router VueStrap JWT

    + Auth0
  4. VueJS च๜Օ奧 斕ᰁ玕໛礍牧篷䰬ୗ౲粬ྛ獢纈䓚襑穩牐 ڡত玕奾䯤墋㻌牧زկݱᛔ加缏牐 .vue ӣ㮆氎磭Ӟ稞笕᪃牐 毆戔㻌ݻ翉ਧ牧䁆ᤈ硳ሲ斃֯牐 螕ݳੜࣳ翕殷䛑አ纷ୗ樄咳牐 Ӟ樄তՋ讕᮷䷱磪牐

  5. VueJS च๜Օ奧 MVVM

  6. VueJS च๜Օ奧

  7. VueJS च๜Օ奧 Lifecycle Hooks init created beforeCompile compiled ready attached

    detached beforeDestroy destroyed
  8. VueJS च๜Օ奧 index.html 蚏ಋୗ

  9. VueJS च๜Օ奧 main.js 蚏ಋୗ

  10. VueJS च๜Օ奧 綡牫౯䷱硽֦ெ讕ਞ蕕㻟牫 vueApp ฎ䌕礯ݷ圸牧藶ۯᆙಧ牐 https:/ /github.com/vuejs/vue-cli

  11. VueJS च๜Օ奧 .vue ฎزկ䲆礯ጱۅ䲆ݷ牐 ڡত玕䲆礯Ӿݢ犥ֵአ components 癲獈زկ牐 زկ蚤 ng1.x ጱ

    Driective 盄觊犲ҁ፡蚏㬵牐
  12. VueJS च๜Օ奧 .vue 䲆礯۱珀ӣ㮆玟璸 template script style ӣ㮆氎磭Ӟ稞笕᪃牐

  13. VueJS च๜Օ奧 .vue 䲆礯<template> HTML 䰬粚 ݢ犥瞲ਧ౮ jade
 襑ᥝਞ蕕 jade-loader

    ֵአ mustache * 瞲㻌稞翉ਧ {{{ፗ矑蜍ڊ HTML }}} <template lang=“jade”> <div> <h1>{{ message }}</h1> <p>{{ *message }}</p> <p>{{{ messageRawHtml }}}</p> <p class="message-{{ messageId }}"></p> </div> </template> http:/ /vue-loader.vuejs.org/en/index.html
  14. VueJS च๜Օ奧 .vue 䲆礯<style> CSS 䰬粚 ݢ犥瞲ਧ傶 scss/sass
 襑ᥝਞ蕕 sass-loader

    scoped 蔭纈蝡㮆䰬ୗݝॺ አࣁ匍磪ጱزկӤ <style lang=“scss” scoped> $primary-color: #633; .component { color: $primary-color; } </style> http:/ /vue-loader.vuejs.org/en/index.html
  15. VueJS च๜Օ奧 .vue 䲆礯<script> script 䰬粚 ݢ犥瞲ਧ傶 coffee
 襑ᥝਞ蕕 coffee-loader

    <script lang=“coffee”> # Write your coffee script here. # 犋ᥝᘍ౯ Coffee Script. </script> http:/ /vue-loader.vuejs.org/en/index.html
  16. VueJS च๜Օ奧 獵ӥጱ藶托褂筕വ Kuro Hsu ጱ墋䁭 http:/ /goo.gl/m8wuEQ ቡ

  17. VueJS 2.0 ?

  18. None
  19. None
  20. VueJS 疩獈䌕礯

  21. VueJS 疩獈䌕礯 http:/ /vuejs.org/guide/application.html ਥොಅ砰䌃ጱই֜ୌ缏य़ࣳ䌕礯疩捝

  22. VueJS 䌕礯襑穩 磪㮆瑿ොݢ犥硯制眲牏ਂ虻碘 蝚螂 API 膏盅ᒒ传蝢 獮ᒒᛔᤈ᪠ኧ 襑ᥝ藨挨 戔懯䒍Ӥಋ਻ฃ 獮ᒒૡ纷䒍Ӥಋ਻ฃ

  23. VueJS 䌕礯襑穩 veux superagent vue-router JWT + Auth0 scss/sass/jade coffee

    or native JavaScript
  24. Vuex https:/ /github.com/vuejs/vuex

  25. Vuex

  26. VueJS + Vuex 褸Ӿୗ制眲ᓕቘ礍䯤牐 觊犲 Flux, Redux ጱ戔懯牐 䢐磪制眲虋ๅԪկ牐 ֵአ㻌Ӟ制眲䰽牐

    ر战ֵ֦አӾՕ纷ଧ㬵狶ٌ犢Ԫ牐 http:/ /vuex.vuejs.org/zh-cn/index.html
  27. https:/ /github.com/vuejs/vuex Vuex 奾䯤窕纷

  28. Vuex च๜奾䯤 getters
 玲஑ state 虻碘 mutations
 ਧ嬝制眲虋ๅ actions
 砰䌃制眲虋ๅ㵕֢

    modules
 硯ᗝ加缏秇奲 store
 ڡত玕ጱ瑿ො
  29. Vuex ڡত玕

  30. Vuex 膏زկ ֵአ getters ೭ک֦ᥝጱ制眲独牐 ֵአ actions 藉咳制眲虋ๅ牐

  31. Vuex 膏زկ ֵአ getters ೭کጱ碍独牧ࣁزկӾݢ犥አ this. ֵአ牐

  32. Vuex 膏زկ getters 㰍胼೭ڊ碍独牧篷ဩፗ矑狕硬 store ጱ制眲牐 狕硬制眲襑ᥝֵአ mutation 㬵狕硬牐 ࣁ瑥໒秇ୗӥ牧Ꮭ硬䨝䁭梊牐

  33. Vuex mutation mutation አ㬵ਧ嬝制眲虋ๅጱԪկ犥现ٌݷ圸牐 墋ฃጱ mutation-types.js 塅ֺ物 Ԫկ膏ٌݷ圸ፘݶฎො׎蘷獨牧犋Ӟਧᥝፘݶ牐 獊蟂᮷य़䌃ฎ Vue

    ਥොୌ捍牧螨ع膏 getters ൥窾牐
  34. 蝚螂秇奲砺֢ mutations。 墋ฃጱ utility.js 塅ֺ。 蝡愊ضڡত玕ԧ state。 矑茐ਧ嬝 mutations 㵕֢牐

    ኧ mutation-types 玲஑మ ᥝጱ制眲ݷ圸牐 䌘蝡犚制眲ݷ圸ਧ嬝傶獢碍牧 㪔ๅ硬 state。 Vuex mutation
  35. mutation ݝݢֵአݶྍ獢碍牐 哴ݢ胼ࣁӞ樄তڡত玕 state。 dispatch ݢ癲氃क़㷢碍牐 ইຎ痀௔搡犋ਂࣁ牧襑ᥝ蝚螂 Vue.set ीے牧 ౲ฎֵአ

    Stage 2* 承᥺粬௔೩揔牐 * https:/ /github.com/sebmarkbage/ecmascript-rest-spread Vuex mutation
  36. actions አ㬵޷ݞ store አ犥虋ๅ制眲牐 墋ฃጱ actions.js 塅ֺ物 Vuex actions

  37. action ݢ犥藉咳ग़᯿ mutations牐 action ᒫӞ㮆㷢碍ฎ store 䋿ֺ牐 ݢ犥ֵአ覍ݶྍ޷ݞ牧mutation犋ᤈ牦 ग़ actions

    ԰ፘ޷ݞ碻牧襑嘦狒蜍獈㷢碍Ӟ膌牐 Vuex actions
  38. - ݢᛔਧ嬝 middleware 妔 Vuex ֵአ牐 - 犥ӥฎਥො塅ֺ物 Vuex middlewares

    ֵአොୗ物
  39. https:/ /github.com/vuejs/vuex Vuex 奾䯤窕纷

  40. superagent https:/ /github.com/visionmedia/superagent Ajax with less suck

  41. superagent

  42. Vuex + superagent - actions 吚Ӿݢ犥ֵአ覍ݶྍ㯽蜍牐 - ݢ犥氃क़޷ݞ API 㬵玲஑虻碘牐

    - 蝡ฎ墋ฃጱጭ獈ොဩ。
  43. action ݢ犥藉咳ग़᯿ mutations牐 ݢ犥ֵአ覍ݶྍ޷ݞ牧mutation犋ᤈ牦 Vuex action + superagent

  44. Vue-router https:/ /github.com/vuejs/vue-router

  45. vue-router

  46. VueJS + vue-router 獮ᒒ᪠ኧྋ॥牐 ֢ဩ蚤ݱय़໛礍य़ݶੜ吖牐 ݢ犥狶 Nested牧㮆Ո憽஑ view 䌃蚏㬵ഇො׎牐 $router

    ݢ犥ᛔਧ嬝痀௔碍独牧ݢአෝ獊ऒ牐 䰬粚Ӿݢֵአ $route ೭ڊ碍独牐 磪 hooks ݢ犥ֵአ牧አෝ矒ګ᪠ኧ窕纷牐
  47. vue-router

  48. vue-router 戔ਧ殻ፓ hashbang history abstract root linkActiveClass saveScrollPosition transitionOnLoad suppressTransitionError

    # 㰍 HTML5 History 秇ୗӥݢአ牐
  49. vue-router Nested ֵአ subRoutes 瞲ਧ્ॺጱ᪠ኧزկ牐

  50. vue-router Nested ࣁӞ㮆زկ䰬粚Ӿֵአ <router-view>牧㳷 ಅ痀ጱ subRoutes 疰䨝ᗝ獈ࣁ䰬粚ጱ <router-view> ಅࣁ֖ᗝ牐

  51. vue-router Pipeline ᪠ኧ虋矦碻牧ݢ蝚螂 Pipeline 膏ٌ hooks 㬵᯿奲زկ牐 data activate deactivate

    canActivate canDeacivate canReuse /foo/boo/qoo /foo/goo/ooo ?
  52. vue-router Hooks data
 አෝ斉獈吚獮 route ጱزկ膏虻碘碻藉咳牐 activate 
 زկࣁୌ缏褩ྦྷ牧扗奲կᤩ獺ୌӬ蝱獈 route

    ԏ獮藉咳牐 deactivate
 زկࣁୌ缏褩ྦྷ牧扗奲կܨ疥ᤩ纔አ౲ᑏᴻ碻藉咳牐
  53. vue-router Hooks canActivate
 ࣁ涢挨褩ྦྷ牧吚زկܨ疥ᤩ્獈碻藉咳牐 canDeactivate
 ࣁ涢挨褩ྦྷ牧吚زկܨ疥ᤩᑏᴻ碻藉咳牐 canReuse
 涢挨Ӟ㮆زկฎ玽ݢ犥ᤩ᯿蕦ֵአ牧毆戔独傶 true牐

  54. vue-router Hooks data, activate, deactivate ᮷஠殾蜴ࢧ Promise ౲۱珀 Promise ጱᇔկ牐

    canActivate, canDeactivate ݢ螡䢔௔蜴ࢧ Promise ౲ Boolean牐 canReuse ஠殾蜴ࢧ Boolean牐
  55. vue-router Hooks http:/ /router.vuejs.org/zh-cn/pipeline/index.html

  56. vue-router Hooks http:/ /router.vuejs.org/zh-cn/pipeline/index.html

  57. vue-router Hooks http:/ /router.vuejs.org/zh-cn/pipeline/index.html

  58. vue-router APIs start stop map on go replace redirect alias

    beforeEach afterEach
  59. VueStrap https:/ /github.com/yuche/vue-strap

  60. VueStrap

  61. VueStrap ֵአොୗ蚤 angularStrap 襊ݶ牐 犋狅蚅犨֜ॺկҁᴻԧ VueJS牐 襑ᛔᤈ癲獈 Bootstrap 3.x.x CSS牐

  62. VueStrap

  63. VueStrap

  64. VueStrap

  65. VueStrap ݝᥝ䨝䌃 Bootstrap 疰ݢ犥樄咳牐 戔懯䒍膏獮ᒒૡ纷䒍砇蟴槹移犵牐 氃क़ॺկ疩獈斃傶揲ૡ牐

  66. JWT + Auth0

  67. JWT + Auth0 獊ݷ傶 JSON Web Token牐 犥 PHP 傶ֺ牧ݢ犥ֵአ

    firebase/php-jwt 㬵叨ኞ牐 犋ฎ碝ጱ䩚ᥜ牐 ๅग़ JWT+auth0 with VueJS ݢ㷢ᘍ https:/ /goo.gl/gdf3H8
  68. JWT + Auth0 犥 Vuex 吚Ӿጱ actions 玲஑ Token牐 㱪ਂෝ

    store 吚Ӿ牐 疥 Token ࢧ䌃ᛗ header Authorization牐 ֵአ localStorage 氃क़㱪ਂ Token牐 ౲ֵአ Cookie 㱪ਂ牐
  69. JWT + Auth0 https:/ /goo.gl/gdf3H8

  70. JWT + Auth0 https:/ /goo.gl/gdf3H8

  71. 㷢ᘍ෈կ https:/ /auth0.com/blog/2015/11/13/build-an-app-with- vuejs/ https:/ /yuche.github.io/vue-strap/ http:/ /vuex.vuejs.org/en/index.html http:/ /router.vuejs.org/en/index.html

    https:/ /vuejs.org
  72. Thanks