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
590
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
650
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
85
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
690
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
380
初探 Vue 3.0 Function API
kurotanshi
4
2.9k
VueJS Style Guide 導讀
kurotanshi
6
1.7k
[JSDC2017] 從 VueJS 看前端生態圈的發展變化
kurotanshi
9
2.1k
Other Decks in Technology
See All in Technology
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
How to Think Like a Performance Engineer
csswizardry
4
590
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Optimizing for Happiness
mojombo
373
69k
A Modern Web Designer's Workflow
chriscoyier
689
190k
A Tale of Four Properties
chriscoyier
155
22k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Embracing the Ebb and Flow
colly
81
4.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Speed Design
sergeychernyshev
9
270
Code Reviewing Like a Champion
maltzj
517
39k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
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