Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vite でお手軽 Vue.js の環境構築
Search
SAW
June 15, 2022
Programming
2
480
Vite でお手軽 Vue.js の環境構築
フロントエンドLT会 - vol.7 の発表資料です。
SAW
June 15, 2022
Tweet
Share
More Decks by SAW
See All by SAW
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
OSS contributor への第一歩を踏み出すまでの物語
azuki
1
110
Eloquent で relation を扱う基礎
azuki
0
47
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
50
ブラウザでテキストを読み上げる
azuki
0
74
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
41
GraphQL 入門
azuki
1
68
JavaScript で音声認識を試してみよう
azuki
0
80
Voice Recognition in JavaScript
azuki
0
32
Other Decks in Programming
See All in Programming
Activities at Cairo Library
cairolibrary720
0
1.2k
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Trial
cairolibrary720
1
130
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Temporalを取り巻く仕様を整理する
sajikix
0
120
Jetpack for KMP
fornewid
1
290
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
CSC307 Lecture 07
javiergs
PRO
0
220
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
The Mythical Team-Month
searls
217
43k
A better future with KSS
kneath
231
17k
Design by the Numbers
sachag
277
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Docker and Python
trallard
37
2.9k
What the flash - Photography Introduction
edds
65
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Optimizing for Happiness
mojombo
373
69k
The World Runs on Bad Software
bkeepers
PRO
63
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Debugging Ruby Performance
tmm1
71
11k
Transcript
7JUFͰ͓खܰ7VFKTͷڥߏங ϑϩϯτΤϯυ-5େձWPM 4"8
$(whoami) ࢯ໊Ճ౻फҰ ࡀ ϋϯυϧωʔϜ4"8 5XJUUFS!B[VLJ@FBUFS ॴଐגࣜձࣾ.4&/ 5XJUUFSΞΠίϯ
ಈػ 7VFKT͕ϦϦʔε͞Εͨ $PNQPTJUJPO"1*ͱ͍͏৽͍͠هड़ํ๏͕Ճ 5ZQF4DSJQUެࣜαϙʔτ 7JUFͱ͍͏ϑϩϯτΤϯυͷϏϧυπʔϧϦϦʔε͞Εͨ ΄ͱΜͲઃఆෆཁͰ։ൃڥ͕ߏஙՄೳ 7VFKT3FBDUͳͲෳͷϑϨʔϜϫʔΫʹରԠ ͲͪΒࢼͤͯͳ͍ͷͰ৮ͬͯΈ͍ͨ
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ͷ͍ํ npmyarn͔Β࣮ߦ άϩʔόϧΠϯετʔϧෆཁ --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*Ͱهड़͞ΕΔ
ϩʔΧϧαʔόʔͷىಈ npmyarnͰdevίϚϯυΛ࣮ߦ ମײͰ7VF$-*ΑΓߴʹىಈ # npm ͷ߹ npm run dev #
yarn ͷ߹ yarn dev
7VFYͱ7VF3PVUFSͷՃ npmyarn͔ΒՃ 7JUF͔ΒՃͰ͖ͳ͍ ࠓޙ7JUF͔ΒબͰ͖ͨΒخ͍͔͠ 7VFKTઐ༻ͷπʔϧͰͳ͍͔Β͍͠ # Vuex ͷՃ yarn
add vuex # Vue Router ͷՃ yarn add vue-router@4
ࠓճࢼͤͳ͔ͬͨ͜ͱ 7VFKTͷ$PNQPTJUJPO"1*Λ͔ͬ͠Γࢼͤͳ͔ͬͨ 2JJUBͳͲͰܰ͘ௐͨఔͰ΄ͱΜͲࢼ͍ͤͯͳ͍ ެࣜʹॻ͔Ε͍ͯͨscriptλάͷsetup͕Α͔͍ͬͯ͘ͳ͍ 7VFKTҎ֎ͷϑϨʔϜϫʔΫͷར༻ 3FBDU4WFMUFͳͲͷڥߏங࣮ߦΛࢼͤͳ͔ͬͨ ࠓޙࢼͯ͠Έ͍ͨ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠