Laravel: 快速前端環境設定Breeze＆Vite-Day10

2023 iThome 鐵人賽

DAY 11

Modern Web

前輩說Laravel不難，好啊那就1人前後端試試看啊系列第 11 篇

15th鐵人賽 laravel vite

Global Rachel

團隊差點不能成團

2023-09-26 22:54:39

547 瀏覽

分享至

搭配服用文檔：Laravel-Asset Bundling (Vite)
Starter Kits: Breeze & Blade

前端環境設定快速開箱：Breeze

昨天用Laravel blade簡單做了一個畫面，今天來看看我們的CSS該怎麼加入Blade呢？

話說話說，忘了我們要安裝Breeze了，Breeze是Laravel一個快速前端模板，
裡面有用戶登入認證機制等等，更重要的是，已經幫我們裝好Tailwind, postcss等的設定啦！

那就起手式先來進入docker安裝Breeze, 並下載我們的前端套件：

laradock % docker-compose up -d workspace php-fpm nginx mysql redis
laradock % docker-compose exec --user=laradock workspace bash
/var/www# cd rachel-projects/career-expo
/var/www#composer require laravel/breeze --dev
/var/www#npm install

這邊前端的設定包括Tailwind就不多做介紹了。
但來看看我們要怎麼把CSS和JS等靜態資源引入到Blade呢？

這就來看看Laravel搭配的打包工具：Vite!

Vite簡單說明

Vite也是vue 的作者尤大大開發的工具，可以幫我們打包CSS,JS資源。
前端還是菜菜的，就不去探討原理了。

Laravel已經幫我們配置好Vite了
package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.8.0",
        "vite": "^4.0.0"
    }
}

譬如說我們在layout裡面把vite的CSS資源放進來
只要加入Vite的命令式就好：@vite('resources/css/app.css')

base.layout.blade.php

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Careers Expo - @section('title')</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
    @vite('resources/css/app.css')

    <style>
        @yield('css-section')
    </style>
</head>