內容目錄
前言
vite 是 Laravel 9 之後的前端檔案管理工具，早期是使用 Laravel Mix。
vite 可熱抽換模組，不用重新執行，開發的流程可以比較流暢。
bootstrap 是一個簡潔易學、美觀好用的前端框架。
最簡單的使用方式，是直接以 CDN 的方式導入。
但在 Laravel 中，我們還可以用 vite 來管理 CSS 和 JavaScript 檔案。
實作方式
第一種方式：使用 laravel/ui
這是比較快速的方法，缺點是 Bootstrap 的版本有時不會是最新的版本。
安裝 laravel/ui 套件
composer require laravel/ui php artisan ui bootstrap # 如果你要加入用戶驗證的功能，則使用以下指令 # php artisan ui bootstrap --auth npm install && npm run dev
在 layout 中，將 vite 導入
修改 resources/views/welcome.blade.php，加入 vite 指令來導入 CCC 及 JavaScript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<title>Welcome</title>
</head>
<body>
<div class="container m-1">
<a class="btn btn-success">Welcome</a>
</div>
</body>
</html>
這樣就可以使用 Bootstrap 這個前端框架了。
第二種方式：手動安裝
其實就是把第一種方式自行一步一步完成。
安裝 bootstrap 和 sass 函式庫
npm install -D bootstrap@5.3.3 npm install -D sass npm install
修改 vite.config.js
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss', // 這行要修改，因為 bootstrap 可以用 sass 來處理 css
'resources/js/app.js',
],
refresh: true,
}),
],
});
修改 bootstrap.js
/resources/js/bootstrap.js
... import 'bootstrap'; // 匯入 bootstrap 5 前端框架
修改 app.scss
resources/sass/app.scss
@import 'bootstrap/scss/bootstrap';
在 layout 中，導入 vite
在 html 的 head 部分加入以下程式碼
resources/views/layout/app.blade.php
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
參考資料
Laravel Vite：繼 Laravel Mix 之後新的前端檔案管理工具
Comments