VueJS 大型專案架構

#假的

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 ?
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