安裝並部署 Livewire 的步驟沒有很多，照著做不用三分鐘就能完成囉！今天一樣是照著官方文件帶大家做一次囉～
首先要先安裝 Livewire 套件，到 Laravel 專案的根目錄下指令：
composer require livewire/livewire
在 Laravel 專案中通常都會建立一個至多個 Layout.blade.php 的檔案當作最外層的頁面，並把 CSS、JavaScript、meta 等等都寫在這裡。由於後面版本的 Laravel 都沒有內建，所以這邊我們會在 resources/views 底下建一個 layouts 資料夾，並在裡面建立一個 app.blade.php 的檔案。建好之後分別在 <head> 及 <body> 加入 @livewireStyles 與 @livewireScripts 這樣就引入完成囉。
以 Vue.js 來說的話，會比較像是 public/index.html
# 路徑 resources/views/layouts/app.blade.php
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
回到終端機，這邊要使用指令來建立 Livewire 的元件。
php artisan make:livewire <元件名稱>
這裡我們就照著官方文件建立一個叫做 ShowPosts 的元件：
php artisan make:livewire ShowPosts
指令下完後會自動產生兩個檔案，分別是：
app/Http/Livewire/ShowPosts.php
resources/views/livewire/show-posts.blade.php
這個檔案會取代原先 Laravel 中 Controller 的功能，之後該頁面會用到的後端邏輯都會寫在這個檔案之中。換句話說就是把原本 Controller 的功能分散至各個 Livewire 中。之後要直接呼叫 Controller 中的 Function 的話還要再透過 Router 才能實現，因此如果有其他地方會重複使用到的 Function 另外寫一個 Class 各別引入應該會比較方便。
以 Vue.js 來說的話，就是各個 vue 頁面底下的 script 區塊
像是 data、methods、computed、mount 都會寫在這裡
這個檔案會放這個元件的 HTML 以及畫面的邏輯等等，跟一般的 Laravel 專案中的 blade 會放的內容是一樣的。
以 Vue.js 來說的話，就是 Vue 檔案上方的 template 部分
iThome鐵人賽
看影片追技術