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
600
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
660
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
90
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
700
[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.2k
Other Decks in Technology
See All in Technology
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
180
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
310
たった1人からはじめる【Agile Community of Practice】~ソース原理とFearless Changeを添えて~
ktc_corporate_it
1
480
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
230
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
180
タイミーのレコメンドにおける ABテストの運用
ozeshun
1
140
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
320
やってやろうじゃないかメカアジャイル! / Let's do it, mechanical agile!
psj59129
1
670
ついに出た!OpenAIの最新モデル「o1」って何がすごいの?
minorun365
PRO
3
1.1k
不動産 x AIことはじめ~データの真価を拓くために
estie
0
110
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Building Applications with DynamoDB
mza
90
6k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
For a Future-Friendly Web
brad_frost
174
9.3k
The Language of Interfaces
destraynor
153
23k
Building Adaptive Systems
keathley
36
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Optimizing for Happiness
mojombo
375
69k
Typedesign – Prime Four
hannesfritz
39
2.3k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
How to name files
jennybc
75
98k
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