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

vue-onsenuiΛڭࡐʹ Vue2 migrationΛ ࢼͯ͠ΈΔ 2016-10-28 Vue.js Tokyo v-meetup="#2" ॕ 2.0
ϦϦʔεه೦ @tady_jp <ଟా·͞ͱ>

ϑΥʔϜɾΤϯυϙΠϯτ

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

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

VueΛ࢖ͬͯ࡞ͬͯ·͢ ※ۙ೔ϦϦʔε

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

Vue 2ʹؒʹ߹͍·ͤΜͰͨ͠…orz

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

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

$ npm i vue-onsenui • ·ͩVue 1ʹ͔͠ରԠ͍ͯ͠ͳ͍

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

͜ͷঢ়ଶͰಈ͔ͯ͠ΈΔ $ npm run dev

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

$ vue-migration-helper src examples

[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 Λ ࢖ͬͯɻ

[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ͱଞͷϥ ΠϒϥϦΛ࢖ͬͯɻ

[3] Rename $index to index and explicity declare it. [Error]
$index has been deprecated to avoid implicitly deﬁned (i.e. "magic") variables [༁] ҉໧తͳม਺ͷఆٛΛආ͚ ΔͨΊʹ $index ͸ඇਪ঑ʹ ͳͬͨΑɻ v-for="(item, index) in items” Λ࢖ͬͯͶɻ

[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 ʹม ߋͯ͠Ͷɻ

[5] Update name="tab-bar-{{ key }}" to v- bind:name="'tab-bar-' + key”.
[Error] Interpolation within attributes has been deprecated. [༁] ଐੑͷதͷม਺ల։ ͸ඇਪ঑ʹͳͬͨΑɻ

[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

[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ʹϚον͢Δ Α͏ʹ௚ͨ͠Αɻ

[8] Entry point Runtime-onlyϏ ϧυͰ͸template Λ࢖͑ͳ͍Αɻ <html>΍<body> ΛϚ΢ϯτ͢Δͷ ͸ඇਪ঑ͩΑɻ ▼
index.html ▼ examples/main.js

ٙ໰ ˍ ͓ΘΓ • Component͔ΒMutationݺΜͰ΋ྑ͍ʁ • Vuex࢖͍ͭͭ  <input v-model=“someValue” />͍ͨ͠
• ࢠComponent͕શͯreadyʹͳͬͨλΠϛϯάΛ஌Γ͍ͨ • ͜ͷεϥΠυͷdiff  → https://github.com/tadyjp/OnsenUI/pull/1

vue-onsenuiを教材に Vue2 migrationを試してみる // migrat...

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

tadyjp

More Decks by tadyjp

Other Decks in Technology

Featured

Transcript

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

ϑΥʔϜɾΤϯυϙΠϯτ

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

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

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

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

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

VueΛ࢖ͬͯ࡞ͬͯ·͢ ※ۙ೔ϦϦʔε

VueΛ࢖ͬͯ࡞ͬͯ·͢ ※ۙ೔ϦϦʔε

ͳ͔Έ ﬁle.vue + Vuex ↓ Webpack + Babel + vue-loader

ͳ͔Έ ﬁle.vue + Vuex ↓ Webpack + Babel + vue-loader

ͳ͔Έ ﬁle.vue + Vuex ↓ Webpack + Babel + vue-loader

ͳ͔Έ ﬁle.vue + Vuex ↓ Webpack + Babel + vue-loader

Vue 2ʹؒʹ߹͍·ͤΜͰͨ͠…orz

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

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

$ npm i vue-onsenui • ·ͩVue 1ʹ͔͠ରԠ͍ͯ͠ͳ͍

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

͜ͷঢ়ଶͰಈ͔ͯ͠ΈΔ $ npm run dev

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

$ vue-migration-helper src examples

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

[2] Built-in ﬁlters have been deprecated. [Error] Replace the built-in

[3] Rename $index to index and explicity declare it. [Error]

[4] Update v-el:navigator to ref=“navigator". [Error] v-el and v-ref merged

[5] Update name="tab-bar-{{ key }}" to v- bind:name="'tab-bar-' + key”.

[6] Replace this.$dispatch('push', options) to use a global event bus

[7] Switch argument order in v-for="(key, value) in collection" to

[8] Entry point Runtime-onlyϏ ϧυͰ͸template Λ࢖͑ͳ͍Αɻ <html>΍<body> ΛϚ΢ϯτ͢Δͷ ͸ඇਪ঑ͩΑɻ ▼

demo

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

vue-onsenuiを教材に Vue2 migrationを 試してみる // migrat...

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

More Decks by tadyjp

Other Decks in Technology

Featured

Transcript

vue-onsenuiを教材に Vue2 migrationを試してみる // migrat...

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