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

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

SAW
June 15, 2022

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

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

SAW

June 15, 2022
Tweet

More Decks by SAW

Other Decks in Programming

Transcript

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

    4"8

    View Slide

  2. $(whoami)
    ࢯ໊Ճ౻फҰ࿠ ࡀ

    ϋϯυϧωʔϜ4"8
    5XJUUFS!B[[email protected]
    ॴଐגࣜձࣾ.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 [email protected]

    View Slide

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

    View Slide

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

    View Slide