vue-onsenuiを教材に Vue2 migrationを 試してみる // migrate vue-onsenui to vue2

0325d2e64ff7ba85aaaeefca9cb882e5?s=47 tadyjp
October 28, 2016

vue-onsenuiを教材に Vue2 migrationを 試してみる // migrate vue-onsenui to vue2

2016-10-28
Vue.js Tokyo v-meetup="#2" 祝 2.0 リリース記念 LT
http://vuejs-meetup.connpass.com/event/41955/

0325d2e64ff7ba85aaaeefca9cb882e5?s=128

tadyjp

October 28, 2016
Tweet

Transcript

  1. vue-onsenuiΛڭࡐʹ Vue2 migrationΛ ࢼͯ͠ΈΔ 2016-10-28 Vue.js Tokyo v-meetup="#2" ॕ 2.0

    ϦϦʔεه೦ @tady_jp <ଟా·͞ͱ>
  2. ϑΥʔϜɾΤϯυϙΠϯτ 

  3. ϑΥʔϜɾΤϯυϙΠϯτ + 

  4. ϑΥʔϜɾΤϯυϙΠϯτ + εςʔλεɾΧϯόϯ 

  5. ϑΥʔϜɾΤϯυϙΠϯτ + εςʔλεɾΧϯόϯ 

  6. ϑΥʔϜɾΤϯυϙΠϯτ + εςʔλεɾΧϯόϯ 

  7. ϑΥʔϜɾΤϯυϙΠϯτ + εςʔλεɾΧϯόϯ 

  8. VueΛ࢖ͬͯ࡞ͬͯ·͢ ※ۙ೔ϦϦʔε

  9. VueΛ࢖ͬͯ࡞ͬͯ·͢ ※ۙ೔ϦϦʔε

  10. ͳ͔Έ file.vue + Vuex ↓ Webpack + Babel + vue-loader

    ↓ Rails (sprockets) + foreman
  11. ͳ͔Έ file.vue + Vuex ↓ Webpack + Babel + vue-loader

    ↓ Rails (sprockets) + foreman
  12. ͳ͔Έ file.vue + Vuex ↓ Webpack + Babel + vue-loader

    ↓ Rails (sprockets) + foreman
  13. ͳ͔Έ file.vue + Vuex ↓ Webpack + Babel + vue-loader

    ↓ Rails (sprockets) + foreman
  14. Vue 2ʹؒʹ߹͍·ͤΜͰͨ͠…orz

  15. Vue.js meets Onsen UI 2 • Onsen UI 2ʹͳͬͯFWΛม͑ΒΕΔΑ͏ʹ ͳͬͨ

  16. $ npm i vue-onsenui • Onsen UIެࣜͰVue binding͕༻ҙ͞Ε͍ͯ Δ͕ɾɾɾ

  17. $ npm i vue-onsenui • ·ͩVue 1ʹ͔͠ରԠ͍ͯ͠ͳ͍

  18. Version Up Vue 2ʹ͸ vue-loader 9.x ͕ඞཁ

  19. ͜ͷঢ়ଶͰಈ͔ͯ͠ΈΔ $ npm run dev

  20. vue-migration-helper ࣮ߦ͢Δͱ ඇਪ঑ՕॴΛ “͍͍ͩͨ” ݟ͚ͭͯ͘ΕΔ

  21. $ vue-migration-helper src examples

  22. [1] ready lifecycle hook has been deprecated [Error] Replace ready

    with mounted, then use Vue.nextTick if you need an in-document guarantee. [༁] ready Λ mountedʹஔ͖׵͑ ͯɻཁૉ͕ଘࡏ͢ΔͷΛ଴ͭඞ ཁ͕͋Ε͹ Vue.nextTick Λ ࢖ͬͯɻ
  23. [2] Built-in filters have been deprecated. [Error] Replace the built-in

    capitalize filter with a custom filter, method, or computed property using npmjs.com/package/ lodash.capitalize. [༁] ϏϧτΠϯͷϑΟϧλʔ͕ͳ ͘ͳ͔ͬͨΒಠࣗͰ࡞Δ͔ɺ computed propertyͱଞͷϥ ΠϒϥϦΛ࢖ͬͯɻ
  24. [3] Rename $index to index and explicity declare it. [Error]

    $index has been deprecated to avoid implicitly defined (i.e. "magic") variables [༁] ҉໧తͳม਺ͷఆٛΛආ͚ ΔͨΊʹ $index ͸ඇਪ঑ʹ ͳͬͨΑɻ v-for="(item, index) in items” Λ࢖ͬͯͶɻ
  25. [4] Update v-el:navigator to ref=“navigator". [Error] v-el and v-ref merged

    into ref attribute. Update this.$els to this. $refs. [༁] v-el ͱ v-ref ͸ refʹ౷߹͞ ΕͨΑɻ
 this.$els ͸ this.$refs ʹม ߋͯ͠Ͷɻ
  26. [5] Update name="tab-bar-{{ key }}" to v- bind:name="'tab-bar-' + key”.

    [Error] Interpolation within attributes has been deprecated. [༁] ଐੑͷதͷม਺ల։ ͸ඇਪ঑ʹͳͬͨΑɻ
  27. [6] Replace this.$dispatch('push', options) to use a global event bus

    or vuex. [Error] $dispatch and $broadcast have been deprecated because the pattern doesn't scale well. [༁] $dispatch ͱ $broadcast ͸εέʔϧ͠ͳ͍͔Βඇਪ ঑ʹͳͬͨΑɻ
 άϩʔόϧͳΠϕϯτΛ࢖ ͏͔VuexΛ࢖ͬͯͶɻ ▼ src/components/OnsNavigator.vue ▼ src/index.js
  28. [7] Switch argument order in v-for="(key, value) in collection" to

    (value, key). [Error] Argument order for v- for has been updated to match JavaScript conventions. [༁] v-forͷҾ਺ͷॱ൪Λ JavaScriptʹϚον͢Δ Α͏ʹ௚ͨ͠Αɻ
  29. [8] Entry point Runtime-onlyϏ ϧυͰ͸template Λ࢖͑ͳ͍Αɻ <html>΍<body> ΛϚ΢ϯτ͢Δͷ ͸ඇਪ঑ͩΑɻ ▼

    index.html ▼ examples/main.js
  30. demo

  31. ٙ໰ ˍ ͓ΘΓ • Component͔ΒMutationݺΜͰ΋ྑ͍ʁ • Vuex࢖͍ͭͭ
 <input v-model=“someValue” />͍ͨ͠

    • ࢠComponent͕શͯreadyʹͳͬͨλΠϛϯάΛ஌Γ͍ͨ • ͜ͷεϥΠυͷdiff
 → https://github.com/tadyjp/OnsenUI/pull/1