Vite でお手軽 Vue.js の環境構築

フロントエンドLT会 - vol.7 の発表資料です。

Transcript

1. 7JUFͰ͓खܰ7VFKTͷ؀ڥߏங
   ϑϩϯτΤϯυ-5େձWPM
   
   4"8
   

   View Slide

2. $(whoami)
   ࢯ໊Ճ౻फҰ࿠ ࡀ
   
   ϋϯυϧωʔϜ4"8
   5XJUUFS!B[VLJ@FBUFS
   ॴଐגࣜձࣾ.4&/ ೥໨
   
   5XJUUFSΞΠίϯ
   

   View Slide

3. ಈػ
   7VFKT͕ϦϦʔε͞Εͨ
   $PNQPTJUJPO"1*ͱ͍͏৽͍͠هड़ํ๏͕௥Ճ
   5ZQF4DSJQU΋ެࣜαϙʔτ
   7JUFͱ͍͏ϑϩϯτΤϯυͷϏϧυπʔϧ΋ϦϦʔε͞Εͨ
   ΄ͱΜͲઃఆෆཁͰ։ൃ؀ڥ͕ߏஙՄೳ
   7VFKT΍3FBDUͳͲෳ਺ͷϑϨʔϜϫʔΫʹରԠ
   ͲͪΒ΋ࢼͤͯͳ͍ͷͰ৮ͬͯΈ͍ͨ
   

   View Slide

4. 7VFKTͷ$PNQPTJUJPO"1*
   ैདྷͷ0QUJPOBM"1*ͱ͸େ෯ʹҟͳΔ৽͍͠"1*
   ैདྷͷdata methodsͳͲ͕setup()಺ʹهड़͞ΕΔ
   thisΛهड़͢Δඞཁ͕ͳ͘ͳͬͨ
   
   
   
   
   
   
   
   
   v-for="item in items"
   
   
   :key="item.id">
   
   
   {{ item.name }}
   
   
   
   
   
   
   
   
   
   ςϯϓϨʔτଆ
   <br/><br/><br/>export default defineComponent({<br/><br/><br/>setup() {<br/><br/><br/>const state = reactive<State>({<br/><br/><br/>items: [{ id: 1, name: 'vite' }],<br/><br/><br/>});<br/><br/><br/>return { state };<br/><br/><br/>},<br/><br/><br/>});<br/><br/><br/>
   εΫϦϓτଆ
   

   View Slide

5. 7JUFͱ͸
   Ϗϧυ͕࣌ؒര଎ͳϑϩϯτΤϯυ։ൃπʔϧ
   େن໛ͳϓϩδΣΫτͰ΋ϩʔΧϧαʔόʔͷىಈ͕ߴ଎
   &WBO:PVࢯ͕࡞੒
   7VFKT 3FBDU 4WFMUFͳͲෳ਺ͷϑϨʔϜϫʔΫʹରԠ
   TDB
   ff
   PME࡞੒࣌ʹ΄ͱΜͲઃఆ͕ෆཁ
   5ZQF4DSJQUͷબ୒΋Մೳ
   

   View Slide

6. 7JUFͷ࢖͍ํ
   npm΍yarn͔Β࣮ߦ
   άϩʔόϧΠϯετʔϧ͸ෆཁ
   --templateΦϓγϣϯͰϑϨʔϜϫʔΫͷࢦఆ΋Մೳ
   # npm ͷ৔߹
   
   
   npm create vite my-vue-app --template vue-ts
   
   
   # yarn ͷ৔߹
   
   
   yarn create vite my-vue-app --template vue-ts
   

   View Slide

7. 7JUFͰ࡞੒͞Εͨ7VFKTͷϓϩδΣΫτ
   7VFKTͰ࡞੒͞ΕΔ
   ςϯϓϨʔτ͸$PNQPTJUJPO"1*Ͱهड़͞ΕΔ
   

   View Slide

8. ϩʔΧϧαʔόʔͷىಈ
   npm΍yarnͰdevίϚϯυΛ࣮ߦ
   ମײͰ7VF$-*ΑΓߴ଎ʹىಈ
   # npm ͷ৔߹
   
   
   npm run dev
   
   
   # yarn ͷ৔߹
   
   
   yarn dev
   

   View Slide

9. 7VFYͱ7VF3PVUFSͷ௥Ճ
   npm΍yarn͔Β௥Ճ
   7JUF͔Β͸௥ՃͰ͖ͳ͍
   ࠓޙ7JUF͔Βબ୒Ͱ͖ͨΒخ͍͔͠΋
   7VFKTઐ༻ͷπʔϧͰ͸ͳ͍͔Β೉͍͠
   # Vuex ͷ௥Ճ
   
   
   yarn add vuex
   
   
   # Vue Router ͷ௥Ճ
   
   
   yarn add vue-router@4
   

   View Slide

10. ࠓճࢼͤͳ͔ͬͨ͜ͱ
    7VFKTͷ$PNQPTJUJPO"1*Λ͔ͬ͠Γࢼͤͳ͔ͬͨ
    2JJUBͳͲͰܰ͘ௐ΂ͨఔ౓Ͱ΄ͱΜͲࢼ͍ͤͯͳ͍
    ެࣜʹॻ͔Ε͍ͯͨscriptλάͷsetup͕Α͘෼͔͍ͬͯͳ͍
    7VFKTҎ֎ͷϑϨʔϜϫʔΫͷར༻
    3FBDU΍4WFMUFͳͲͷ؀ڥߏங΍࣮ߦΛࢼͤͳ͔ͬͨ
    ࠓޙࢼͯ͠Έ͍ͨ
    

    View Slide

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

    View Slide