【Laravel實戰】15分鐘搞懂 Livewire 的套件安裝與組件建立

【Laravel實戰】15分鐘搞懂 Livewire 的套件安裝與組件建立

大家好,我是哥布林工程師,今天繼續來分享Livewire,來說說關於安裝Livewire與建立組件的更多細節

Livewire安裝

下載套件

首先,我們來看一下 Livewire 2.0版本的基本需求為何?

  • PHP 7.2.5以上版本
  • Laravel 7.0以上版本

要在你的Laravel專案去安裝Livewire,最簡單的做法就是透過composer工具,請輸入以下指令

composer require livewire/livewire

如果你對它感到好奇的話,可參考這裡的composer.json檔案來瞭解完整的依賴套件內容,不過如果你只是剛入門階段是沒有這個必要的

載入套件素材

將以下的Blade指令加在會用到Livewire的頁面之head和body標籤內,去載入JS和CSS檔案,我個人是偏好加在佈局檔就不用每個畫面一個個新增

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

你也可以改用以下的版本,結果相同

<livewire:styles />
...
<livewire:scripts />

簡單吧,現在你就可以開始使用Livewire囉,其他以下的安裝動作都是非必須的

發布設定檔案(非必須)

Livewire朝向零設定檔的架構來設計,但或許你會希望能夠更多的設定空間。你可以使用以下命令來將Livewire設定檔加入專案中

php artisan livewire:publish --config

發布前端素材(非必須)

假如你希望JS前端素材不要透過Laravel來取得,而是透過像public這樣的開放資料夾,可以使用 livewire:publish 命令

php artisan livewire:publish --assets

為了確保素材能即時更新以避免後續更新造成的問題,強烈建議加入以下命令到 composer.json檔案內的 post-autoload-dump腳本中

{
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan vendor:publish --force --tag=livewire:assets --ansi"
        ]
    }
}

設定素材基礎網址(非必須)

預設來說,Livewire所需要使用的JS檔案(livewire.js),是透過這個路由來取得的:/livewire/livewire.js ,而之前的Blade指令將會生成這樣的完整內容

<script src="/livewire/livewire.js"></script>

有兩種狀況將會導致這個JS檔案無法正常取得

  • 1.你發布了Livewire前端素材並將之放入一個子資料夾,比如"assets"
  • 2.你的應用不是佈署於網域的根路徑,比如your-laravel-app.com/application。在這種狀況下JS檔案路徑將變成 /application/livewire/livewire.js,但負責生成的Blade指令依然會生成路徑為/livewire/livewire.js

為了解決上兩種狀況的問題,你能夠在 config/livewire.php 設定檔中去設定 "asset_url" 來調整src屬性裏頭的內容,也就是說,你需要發布livewire設定檔,並修改以下內容:

'asset_url' => '/assets'
'asset_url' => '/application'

建立Livewire組件

之前有說過,如果要建立一個新的Livewire組件,可以透過以下命令

php artisan make:livewire ShowPosts

但是 Livewire 同樣支援以中橫線的方式來命名組件,所以像下面這樣命名也是可以的,而且我個人也比較喜歡用這個與Blade檔名相同的寫法,比較好記

php artisan make:livewire show-posts

接著將會有兩個檔案在專案內生成,名稱分別是

app/Http/Livewire/ShowPosts.php
resources/views/livewire/show-posts.blade.php

假如你希望能在子資料夾內去建立組件,能夠使用以下這些語法,我個人較為建議點語法,因為不用去記線條的方向

php artisan make:livewire Post\\Show
php artisan make:livewire Post/Show
php artisan make:livewire post.show

這樣的話,組件檔案就會生成在子資料夾內囉,像是這樣:

app/Http/Livewire/Post/Show.php
resources/views/livewire/post/show.blade.php

inline組件

Inline 組件,白話說就是將視圖內容直接寫在類別中而省去blade檔案。你能夠加入 --inline選項到命令中來生成 Inline組件

php artisan make:livewire ShowPosts --inline

這樣的話,就只會生成組件類別但不會生成組件視圖檔案,像是這樣:

app/Http/Livewire/ShowPosts.php

而檔案裡頭的內容就會像是這個樣子:

class ShowPosts extends Component
{
    public function render()
    {
        return <<<'blade'
            <div></div>
        blade;
    }
}

分享這篇文章:

關聯文章:

訂閱電子報,索取 Laravel 學習手冊

價值超過 3000 元,包含常用 Laravel 語法與指令!

Laravel 百萬年薪特訓營

從最基礎的 PHP 語法開始,包含所有你該知道的網頁基礎知識,連同 Laravel 從零開始一直到實戰,最後還將告訴你如何找好工作,讓你及早擁有百萬年薪