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/

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