Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vite でお手軽 Vue.js の環境構築
SAW
June 15, 2022
Programming
2
190
Vite でお手軽 Vue.js の環境構築
フロントエンドLT会 - vol.7 の発表資料です。
SAW
June 15, 2022
Tweet
Share
More Decks by SAW
See All by SAW
Vue.js と Chart.js でチャートを描画する
azuki
0
5.1k
美味しい果実になるために ~桃栗三年~
azuki
0
240
DockerでApache+PHP+MySQLの環境構築
azuki
2
660
Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える
azuki
2
2.2k
LaravelでMarkdownをブラウザに表示する方法
azuki
0
670
VuetifyをLaravel-Mixでコンパイルしたい
azuki
1
550
Quasar ことはじめ
azuki
1
370
FreeBSDでデスクトップ 環境構築
azuki
0
210
Vue.js初心者がelectron-vueでデスクトップ アプリケーションを作成した話
azuki
0
90
Other Decks in Programming
See All in Programming
競プロのすすめ
uya116
0
680
Amazon ECSのネットワーク関連コストの話
msato
0
660
GDG Seoul IO Extended 2022 - Android Compose
taehwandev
0
340
Android Compose Component - mapping.
taehwandev
0
140
Independently together: better developer experience & App performance
bcinarli
0
190
Modern Android Developer ~ 안내서
pluu
1
660
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
570
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
1
190
CakePHPの内部実装 から理解するPSR-7
boro1234
0
260
Imperative is dead, long live Declarative! | Appdevcon
prof18
0
120
VisualProgramming_GoogleHome_LINE
nearmugi
1
240
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
190
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
319
19k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
A designer walks into a library…
pauljervisheath
196
16k
Unsuck your backbone
ammeep
659
55k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Bootstrapping a Software Product
garrettdimon
296
110k
Statistics for Hackers
jakevdp
781
210k
Gamification - CAS2011
davidbonilla
75
3.9k
Thoughts on Productivity
jonyablonski
43
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
It's Worth the Effort
3n
172
25k
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ͳͲͷڥߏங࣮ߦΛࢼͤͳ͔ͬͨ ࠓޙࢼͯ͠Έ͍ͨ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠