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
530
EditorConfig を使ってみよう
azuki
1
77
Symfony でサクッと作る REST API サーバー
azuki
1
150
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
190
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
290
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
150
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
360
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
320
Eloquent で relation を扱う基礎
azuki
0
170
Other Decks in Programming
See All in Programming
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
200
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
170
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.4k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
兎に角、コードレビュー
mitohato14
0
150
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
250
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
15
8.8k
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
210
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Faster Mobile Websites
deanohume
309
31k
BBQ
matthewcrist
89
9.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Code Reviewing Like a Champion
maltzj
525
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Designing Experiences People Love
moore
142
24k
The World Runs on Bad Software
bkeepers
PRO
70
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ͳͲͷڥߏங࣮ߦΛࢼͤͳ͔ͬͨ ࠓޙࢼͯ͠Έ͍ͨ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠