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
560
Vite でお手軽 Vue.js の環境構築
フロントエンドLT会 - vol.7 の発表資料です。
SAW
June 15, 2022
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
570
EditorConfig を使ってみよう
azuki
1
80
Symfony でサクッと作る REST API サーバー
azuki
1
170
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
200
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
300
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
150
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
370
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
320
Eloquent で relation を扱う基礎
azuki
0
170
Other Decks in Programming
See All in Programming
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
340
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
770
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.8k
旅行プランAIエージェント開発の裏側
ippo012
2
930
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
チームのテスト力を鍛える
goyoki
3
910
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Ruby Parser progress report 2025
yui_knk
1
460
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Context Engineering - Making Every Token Count
addyosmani
3
60
Optimizing for Happiness
mojombo
379
70k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Being A Developer After 40
akosma
90
590k
Side Projects
sachag
455
43k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
RailsConf 2023
tenderlove
30
1.2k
Visualization
eitanlees
148
16k
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ͳͲͷڥߏங࣮ߦΛࢼͤͳ͔ͬͨ ࠓޙࢼͯ͠Έ͍ͨ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠