Table of Contents
安裝 laravel 及相關元件
composer create-project laravel/laravel lab-web
cd lab-web
# 安裝 laravel 專案的必要模組
npm install
# 安裝 bootstrap 的模組
npm i --save bootstrap @popperjs/core
npm i --save-dev sass設定檔
resources/scss/app.css
@import 'bootstrap/dist/css/bootstrap.css';
...resources/js/bootstrap.js
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
...vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
頁面程式碼
welcome.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
@vite(["resources/css/app.css", "resources/js/app.js"])
</head>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Vite!</h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<button class="btn btn-primary">Primary button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</body>
</html>編譯後執行
npm run build
php artisan serve這樣就可以透過 laravel 內建的 server ，讓我們能在 http://127.0.0.1:8000 看到執行的結果。
網頁的呈現如下：
Comments