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
550
Vite でお手軽 Vue.js の環境構築
フロントエンドLT会 - vol.7 の発表資料です。
SAW
June 15, 2022
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
370
EditorConfig を使ってみよう
azuki
1
69
Symfony でサクッと作る REST API サーバー
azuki
1
130
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
160
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
260
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
140
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
350
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
300
Eloquent で relation を扱う基礎
azuki
0
160
Other Decks in Programming
See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
ニーリーにおけるプロダクトエンジニア
nealle
0
840
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
710
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.8k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
It's Worth the Effort
3n
185
28k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Being A Developer After 40
akosma
90
590k
Fireside Chat
paigeccino
37
3.5k
Building an army of robots
kneath
306
45k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Designing Experiences People Love
moore
142
24k
Faster Mobile Websites
deanohume
307
31k
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ͳͲͷڥߏங࣮ߦΛࢼͤͳ͔ͬͨ ࠓޙࢼͯ͠Έ͍ͨ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠