Nuxt勉強会用スライド

Transcript

1. Nuxt.jsॳ৺ऀ̎ਓʹΑΔSPA։ൃ
2. ൃදͰ఻͍͑ͨ͜ͱ - ։ൃͯ͠޻෉ͨ͠఺ - ։ൃΛ௨ֶͯ͠Μͩ఺ ΋ͬͱྑ͍ํ๏͕͋ΔΑʂʂ ࣍ͷεςοϓ͸͜Ε΍Δͱ͍͍͔΋ʂʂ ɾɾɾ͕͋ͬͨΒੋඇڭ͍͑ͯͩ͘͞ʂ
3. ࣗ෼ͷ໨ඪ - ۀ຿Ͱ࢖͍ͬͯΔNuxt.js΁ͷཧղΛਂΊΔ - ࢖ͬͨ͜ͱͷͳ͍TypeScriptʹ௅ઓ - FirebaseΛ࢖ͬͯHostingɺDatabaseΛܦݧ - ͻ͔νϟϯͱڠྗ͠ɺϓϥΠϕʔτͰ΋։ൃ
4. ͭͬͨ͘΋ͷ - ಛՁ = ੺ɹͷΠϝʔδΛදݱ - ओ්͕޷͖ͦ͏ͳσβΠϯΛҙࣝ https://tocca-project-9f4fc.firebaseapp.com
5. ͭͬͨ͘΋ͷ - item nameͱpriceΛೖྗ - ௥Ճػೳ - ࡟আػೳ - อଘػೳ - ࡟আϞʔμϧ - τʔετ ʢ໊લ/ֹۚΛೖྗ͍ͯͩ͘͠͞ʣ
6. ։ൃ؀ڥ - nuxt ɿ2.5.1 - typescriptɿ3.4.1 - cross-envɿ5.2.0 - vue-property-decoratorɿ8.1.0 - vuetifyɿ1.5.5 - eslintɿ5.15.1 - firebaseɿ5.9.2 - node-sassɿ4.11.0 - pugɿ2.0.3
7. FirebaseͰԿΛ͔ͨ͠ Firebase͸mBaaSʢmobile backend as a Serviceʣ ͱݺ͹ΕΔαʔόʔϨεΛ࣮ݱ͢ΔαʔϏε - Hostingɿ੩తαΠτͷϗεςΟϯάɾSSLରԠ - AuthenticationɿGoogleΞΧ΢ϯτͰͷϩάΠϯɺ৘ใऔಘ - Realtime DatabaseɿNoSQLͳσʔλϕʔε
8. direnvΛ࢖ͬͯ؀ڥม਺Λઃఆ σΟϨΫτϦຖʹࣗಈͰ؀ڥม਺Λఆٛ nuxt.configʹenvϓϩύςΟΛઃఆ
9. શମߏ੒ / /login /home
10. ޻෉ͨ͠఺ᶃ middlewareػೳͰϧʔςΟϯάͷॲཧΛ௥Ճ
11. σʔλͷಈ͖ Firebase Save ೖྗͨ͠σʔλΛVuexͰ؅ཧ อଘ࣌ʹσʔλϕʔε΁֨ೲ
12. ޻෉ͨ͠఺ᶄ layoutΛ࢖ͬͯڞ௨ϔομʔΛ࡞੒ Components/Glovalnav.vue topɺ/loginɺ/home Ͱ࢖༻ pathʹΑͬͯϘλϯ͕มΘΔ
13. ޻෉ͨ͠఺ᶅ - എܠը૾Λಁա - ϩάΠϯը໘Ͱ͸ Լ෦ͷΈഎը૾Λදࣔ
14. - ๙ΊΔػೳ - TwitterϩάΠϯ - อଘͯ͠ͳ͍ΑϞʔμϧ - ϩάΞ΢τ׬ྃτʔετ - δϟϯϧ෼͚ - ϖʔδωʔγϣϯ - VuexͷTSԽ Ͱ͖ͳ͔ͬͨ͜ͱ