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
Laravel x Vite
Search
Kuro Hsu
August 05, 2021
Technology
0
610
Laravel x Vite
Laravel x Vite / Kuro Hsu
@ PHP 也有 Day #60
Kuro Hsu
August 05, 2021
Tweet
Share
More Decks by Kuro Hsu
See All by Kuro Hsu
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
690
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
95
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
710
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
380
初探 Vue 3.0 Function API
kurotanshi
4
2.9k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
[JSDC2017] 從 VueJS 看前端生態圈的發展變化
kurotanshi
9
2.2k
Other Decks in Technology
See All in Technology
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
510
『Firebase Dynamic Links終了に備える』 FlutterアプリでのAdjust導入とDeeplink最適化
techiro
0
130
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
110
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
230
SSMRunbook作成の勘所_20241120
koichiotomo
3
160
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
複雑なState管理からの脱却
sansantech
PRO
1
150
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
100
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
630
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Code Reviewing Like a Champion
maltzj
520
39k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How to Ace a Technical Interview
jacobian
276
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Bash Introduction
62gerente
608
210k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Transcript
Kuro Hsu @ PHP 也有 Day #60 2021/08/05 Laravel x
Vite
Kuro Hsu Front-End Developer Organizers of Vue.js Taiwan (Vue.tw) https://kuro.tw
[email protected]
@kurotanshi
Vite 是什麼 vite ⚡ 發音 /vit/ ,是法語中「快速」的意思 由 Vue.js 的作者
Evan You 所開發 快速啟動、即時更新的前端 「開發工具」 不只 親兒子 Vue, React 也能用! https://github.com/vitejs/vite
None
實際對比: 以 React Create App 為例 Link
Vite 為什麼這麼快
Vite 為什麼這麼快
以 Bundle 為基礎 (webpack)
以 ES Module 為基礎 (vite、snowpack)
橫向對比
更多相關細節 [MOPCON 2020] vite: Make web dev fast again
今日重點 - Vite ❤️ Laravel
基本需求 Laravel: PHP 7.4+ Vite: Node 12+ 開發用 瀏覽器需支援 ES
Module 若需支援舊版瀏覽器 ,須另外安裝 @vitejs/plugin-legacy
開始與起步 首先要有一個 laravel 專案: 切換到專案目錄,並執行: 1 $ composer create-project laravel/laravel
example-app 1 $ npx apply laravel:vite
手動處理 或者也可以自行處理: 1 # 手動移除 laravel-mix 2 rm webpack.mix.js 3
yarn remove laravel-mix 1 # 安裝必要套件,此步驟不可省略! 2 composer require innocenzi/laravel-vite 3 yarn add vite laravel-vite --dev
設定 編輯 vite.config.ts 檔案 1 // vite.config.ts 2 import {
defineConfig } from 'laravel-vite' 3 import vue from '@vitejs/plugin-vue' 4 5 export default defineConfig() 6 .withPlugin(vue) 7 .merge({ 8 // Your own Vite options 9 })
設定 編輯 package.json 檔案 1 // package.json 2 "scripts": {
3 "dev": "vite", 4 "build": "vite build", 5 "serve": "vite preview" 6 }, 3 "dev": "php artisan serve & vite", // 同時啟動 artisan serve 與 vite 1 // package.json 2 "scripts": { 4 "build": "vite build", 5 "serve": "vite preview" 6 },
這是用來更新靜態檔的 vite 服務 注意,這才是開發用網頁伺服器
Hello Vite!
更多資訊 Laravel Vite ViteJS vite2: Make Web Dev Fast Again
& Again