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

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

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

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

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> εΫϦϓτଆ

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

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

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

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

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

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

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

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

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

SAW

Transcript

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

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

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

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

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

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

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

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

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

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

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

More Decks by SAW

Other Decks in Programming

Featured