【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;
}
}