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
570
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
630
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
80
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.1k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
680
[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
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Cracking the KubeCon CfP
inductor
2
250
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
560
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
260
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
140
LLM開発・活用の舞台裏@2024.04.25
yushin_n
1
360
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
開発パフォーマンスを最大化するための開発体制
ham0215
2
440
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
VS CodeでAWSを操作しよう
smt7174
8
1.7k
Building Dashboards as a Hobby
egmc
0
230
Featured
See All Featured
Docker and Python
trallard
34
2.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Six Lessons from altMBA
skipperchong
21
3k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Scaling GitHub
holman
457
140k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Web Components: a chance to create the future
zenorocha
305
41k
Done Done
chrislema
178
15k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
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