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
540
Vite でお手軽 Vue.js の環境構築
フロントエンドLT会 - vol.7 の発表資料です。
SAW
June 15, 2022
Tweet
Share
More Decks by SAW
See All by SAW
EditorConfig を使ってみよう
azuki
1
50
Symfony でサクッと作る REST API サーバー
azuki
1
65
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
110
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
210
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
110
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
320
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
260
Eloquent で relation を扱う基礎
azuki
0
140
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
110
Other Decks in Programming
See All in Programming
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
240
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
120
OUPC2024 Day 1 解説
kowerkoint
0
400
eBPF Updates (March 2025)
kentatada
0
130
フロントエンドテストの育て方
quramy
9
2.6k
ローコードサービスの進化のためのモノレポ移行
taro28
1
340
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
240
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
6
3k
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.8k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
990
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
requirements with math
moony
0
520
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Adaptive Systems
keathley
41
2.5k
RailsConf 2023
tenderlove
29
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
GraphQLとの向き合い方2022年版
quramy
45
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Adopting Sorbet at Scale
ufuk
75
9.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
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ͳͲͷڥߏங࣮ߦΛࢼͤͳ͔ͬͨ ࠓޙࢼͯ͠Έ͍ͨ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠