Quasar ことはじめ

v_kansai meetup #9 の発表資料です。

Transcript

1. 2VBTBS͜ͱ͸͡Ί
   WLBOTBJNFFUVQ
   
   4"8
   

   View Slide

2. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
   $(whoami)
   • ࢯ໊Ճ౻फҰ࿠ ࡀ
   
   ‣େࡕࡏॅɾѪ஌ग़਎
   • ϋϯυϧωʔϜ4"8
   ‣5XJUUFS!B[VLJ@FBUFS
   ‣(JU)VCB[VLJQFOHVJO
   • ॴଐגࣜձࣾ.4&/
   ‣৽ଔ೥໨
   2
   Vue.js
   FreeBSD
   Linux
   macOS
   

   View Slide

3. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
   2VBTBSͱ͸
   • 7VFKTͷϑϨʔϜϫʔΫ
   ‣2VBTBS'SBNFXPSLͷਖ਼ࣜ൛
   • 6*ίϯϙʔωϯτ͕๛෋
   • 41"΍18" &MFDUSPOΞϓϦέʔγϣϯͷ࡞੒͕༰қ
   3
   

   View Slide

4. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
   2VBTBSͷ6*ίϯϙʔωϯτ
   • 7VFUJGZͷίϯϙʔωϯτΛ͍͍ͩͨ໢ཏ
   ‣#SFBEDSVNCT $BSPVTFM $PMPS1JDLFSͳͲ
   • ͍͔ͭ͘ͷίϯϙʔωϯτ͸εΫϦϓτ͔Βಈతʹݺͼग़͕͠Մೳ
   ‣%JBMPH΍/PUJGZͳͲΛϓϥάΠϯͱͯ͠+BWB4DSJQU͔Βݺͼग़͠
   4
   

   View Slide

5. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
   2VBTBSͷ௕ॴ
   • ϚϧνϓϥοτϑΥʔϜͰͷΞϓϦέʔγϣϯ։ൃʹରԠ
   ‣σεΫτοϓΞϓϦ։ൃ&MFDUSPO
   ‣ϞόΠϧΞϓϦ։ൃ$PSEPWB
   • 6TFS"HFOUΛݕग़͢Δϔϧύ͕༏ल
   ‣04ɾϒϥ΢βɾόʔδϣϯͳͲ͕औಘՄೳ
   ‣ϓϥοτϑΥʔϜʹΑͬͯॲཧͷ੾Γସ͕͑༰қ
   5
   

   View Slide

6. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
   2VBTBSΠϯετʔϧɾϓϩδΣΫτ࡞੒
   • 2VBTBS$-*ΛάϩʔόϧΠϯετʔϧ
   ‣7VF$-*ͷΠϯετʔϧ͸ෆཁ
   ‣npm install @quasar/cli -g
   • 7VF$-*ͱಉ༷ʹ2VTBS$-*ͰϓϩδΣΫτͷ࡞੒͕Մೳ
   ‣ґଘύοέʔδͷΧελϚΠζ΋Մೳ
   ‣quasar create project-name
   6
   

   View Slide

7. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
   ར༻͢Δίϯϙʔωϯτͷએݴ
   • ઃఆϑΝΠϧquasar.conf.jsΛฤू
   ‣σϑΥϧτͰ͍͔ͭ͘ઃఆ͞Ε͍ͯΔ
   • 4'$ͰίϯϙʔωϯτΛར༻
   ‣quasar.conf.jsͰهड़͍ͯ͠ΔͷͰimport͸ෆཁ
   7
   

   View Slide

8. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
   ϓϩδΣΫτͷϏϧυ
   • ։ൃ༻αʔόͷىಈ
   ‣quasar dev
   • ຊ൪༻ͷ੩తϑΝΠϧΛੜ੒
   ‣quasar build
   ‣੒Ռ෺͸distσΟϨΫτϦ഑Լʹੜ੒
   8
   

   View Slide

9. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
   ։ൃϞʔυΛมߋ͢Δํ๏
   • σϑΥϧτͰ͸41"ͷ։ൃϞʔυ
   ‣quasar mode add dev-modeͰ։ൃϞʔυΛ௥Ճ
   - ྫquasar mode add electron
   • ։ൃαʔόΛىಈ͢ΔࡍʹϞʔυΛࢦఆ
   ‣quasar dev -m dev-modeͰ։ൃ༻αʔόͷϞʔυΛมߋ
   - ྫquasar dev -m electron
   9
   

   View Slide

10. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
    2VBTBSΛ༻͍ͨྫ
    • ςΩετΤσΟλΛ࡞੒
    ‣։ൃϞʔυΛ&MFDUSPOʹมߋ
    ‣ΤσΟλΤϯδϯ͸"DFΛ࢖༻
    10
    

    View Slide

11. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
    ࠓޙαϙʔτͯ͠΄͍͜͠ͱ
    • طଘͷϓϩδΣΫτ΁ͷOQNܦ༝ͷΠϯετʔϧ
    ‣-BSBWFM.JYͰҰॹʹίϯύΠϧग़དྷͳ͍
    - ϏϧυͰੜ੒͞ΕΔindex.htmlΛΫϥΠΞϯτʹ౉͢ͱ͍͏खஈ͸͋Δ
    ‣$%/ܦ༝ͰͷΠϯετʔϧ͸Մೳ
    - 7VF΋$%/ܦ༝ͰΠϯετʔϧ͕ඞཁ
    11
    

    View Slide

12. WLBOTBJNFFUVQ 2VBTBS͜ͱ͸͡Ί
    ·ͱΊ
    • 2VBTBSͰ෯޿͍։ൃΛαϙʔτ
    ‣41" 18" &MFDUSPOͳͲ
    • 6*ίϯϙʔωϯτ͕ॆ࣮
    ‣7VFUJGZͱ΄΅ಉ౳ͷ಺༰
    12
    

    View Slide

13. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide