Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Be33a704f251c77162896ac5ba03e9ac?s=47 SAW
June 15, 2022

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

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

Be33a704f251c77162896ac5ba03e9ac?s=128

SAW

June 15, 2022
Tweet

More Decks by SAW

Other Decks in Programming

Transcript

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

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

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

  4. 7VFKTͷ$PNQPTJUJPO"1* ैདྷͷ0QUJPOBM"1*ͱ͸େ෯ʹҟͳΔ৽͍͠"1* ैདྷͷdata methodsͳͲ͕setup()಺ʹهड़͞ΕΔ thisΛهड़͢Δඞཁ͕ͳ͘ͳͬͨ <template> <main> <div v-for="item in

    items" :key="item.id"> <p>{{ item.name }}</p> </div> </main> </template> ςϯϓϨʔτଆ <script lang="ts"> export default defineComponent({ setup() { const state = reactive<State>({ items: [{ id: 1, name: 'vite' }], }); return { state }; }, }); </script> εΫϦϓτଆ
  5. 7JUFͱ͸ Ϗϧυ͕࣌ؒര଎ͳϑϩϯτΤϯυ։ൃπʔϧ େن໛ͳϓϩδΣΫτͰ΋ϩʔΧϧαʔόʔͷىಈ͕ߴ଎ &WBO:PVࢯ͕࡞੒ 7VFKT 3FBDU 4WFMUFͳͲෳ਺ͷϑϨʔϜϫʔΫʹରԠ TDB ff PME࡞੒࣌ʹ΄ͱΜͲઃఆ͕ෆཁ

    5ZQF4DSJQUͷબ୒΋Մೳ
  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
  7. 7JUFͰ࡞੒͞Εͨ7VFKTͷϓϩδΣΫτ 7VFKTͰ࡞੒͞ΕΔ ςϯϓϨʔτ͸$PNQPTJUJPO"1*Ͱهड़͞ΕΔ

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

    yarn ͷ৔߹ yarn dev
  9. 7VFYͱ7VF3PVUFSͷ௥Ճ npm΍yarn͔Β௥Ճ 7JUF͔Β͸௥ՃͰ͖ͳ͍ ࠓޙ7JUF͔Βબ୒Ͱ͖ͨΒخ͍͔͠΋  7VFKTઐ༻ͷπʔϧͰ͸ͳ͍͔Β೉͍͠ # Vuex ͷ௥Ճ yarn

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

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