Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vue js 大型專案架構

8,859 views

Published on

#假的

Published in: Technology
  • Login to see the comments

Vue js 大型專案架構

  1. 1. # VueJS
  2. 2. Kuro Hsu http://goo.gl/m8wuEQ
  3. 3. Agenda VueJS VueJS Vuex Vue Router VueStrap JWT + Auth0
  4. 4. VueJS .vue
  5. 5. VueJS MVVM
  6. 6. VueJS
  7. 7. VueJS Lifecycle Hooks init created beforeCompile compiled ready attached detached beforeDestroy destroyed
  8. 8. VueJS index.html
  9. 9. VueJS main.js
  10. 10. VueJS vueApp https://github.com/vuejs/vue-cli
  11. 11. VueJS .vue components ng1.x Driective
  12. 12. VueJS .vue template script style
  13. 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. 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. 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. 16. VueJS Kuro Hsu http://goo.gl/m8wuEQ 閱
  17. 17. VueJS 2.0 ?
  18. 18. VueJS
  19. 19. VueJS http://vuejs.org/guide/application.html
  20. 20. VueJS API
  21. 21. VueJS veux superagent vue-router JWT + Auth0 scss/sass/jade coffee or native JavaScript
  22. 22. Vuex https://github.com/vuejs/vuex
  23. 23. Vuex
  24. 24. VueJS + Vuex Flux, Redux http://vuex.vuejs.org/zh-cn/index.html
  25. 25. https://github.com/vuejs/vuex Vuex
  26. 26. Vuex getters
 state mutations
 actions
 modules
 store

  27. 27. Vuex
  28. 28. Vuex getters actions
  29. 29. Vuex getters this.
  30. 30. Vuex getters store mutation
  31. 31. Vuex mutation mutation mutation-types.js Vue getters
  32. 32. mutations。 utility.js 。 state。 mutations mutation-types state。 Vuex mutation
  33. 33. mutation state。 dispatch Vue.set Stage 2* * https://github.com/sebmarkbage/ecmascript-rest-spread Vuex mutation
  34. 34. actions store actions.js Vuex actions
  35. 35. action mutations action store mutation actions Vuex actions
  36. 36. - middleware Vuex - Vuex middlewares
  37. 37. https://github.com/vuejs/vuex Vuex
  38. 38. superagent https://github.com/visionmedia/superagent Ajax with less suck
  39. 39. superagent
  40. 40. Vuex + superagent - actions - API - 。
  41. 41. action mutations mutation Vuex action + superagent
  42. 42. Vue-router https://github.com/vuejs/vue-router
  43. 43. vue-router
  44. 44. VueJS + vue-router Nested view $router $route hooks
  45. 45. vue-router
  46. 46. vue-router hashbang history abstract root linkActiveClass saveScrollPosition transitionOnLoad suppressTransitionError # HTML5 History
  47. 47. vue-router Nested subRoutes
  48. 48. vue-router Nested <router-view> subRoutes <router-view>
  49. 49. vue-router Pipeline Pipeline hooks data activate deactivate canActivate canDeacivate canReuse /foo/boo/qoo /foo/goo/ooo ?
  50. 50. vue-router Hooks data
 route activate 
 route deactivate

  51. 51. vue-router Hooks canActivate
 canDeactivate
 canReuse
 true
  52. 52. vue-router Hooks data, activate, deactivate Promise Promise canActivate, canDeactivate Promise Boolean canReuse Boolean
  53. 53. vue-router Hooks http://router.vuejs.org/zh-cn/pipeline/index.html
  54. 54. vue-router Hooks http://router.vuejs.org/zh-cn/pipeline/index.html
  55. 55. vue-router Hooks http://router.vuejs.org/zh-cn/pipeline/index.html
  56. 56. vue-router APIs start stop map on go replace redirect alias beforeEach afterEach
  57. 57. VueStrap https://github.com/yuche/vue-strap
  58. 58. VueStrap
  59. 59. VueStrap angularStrap VueJS Bootstrap 3.x.x CSS
  60. 60. VueStrap
  61. 61. VueStrap
  62. 62. VueStrap
  63. 63. VueStrap Bootstrap
  64. 64. JWT + Auth0
  65. 65. JWT + Auth0 JSON Web Token PHP firebase/php-jwt JWT+auth0 with VueJS https://goo.gl/gdf3H8
  66. 66. JWT + Auth0 Vuex actions Token store Token header Authorization localStorage Token Cookie
  67. 67. JWT + Auth0 https://goo.gl/gdf3H8
  68. 68. JWT + Auth0 https://goo.gl/gdf3H8
  69. 69. 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
  70. 70. Thanks

×