###### tags: `Laravel教學已拍` # [Laravel進階] Livewire核心知識篇2: 安裝與建立組件 ![](https://i.imgur.com/03bP6qh.jpg) 大家好，我是哥布林工程師，今天繼續來分享Livewire，聊聊關於安裝Livewire與建立組件的更多細節 對了 如果你是第一次來到我們頻道的話，歡迎收看我們的課程 哥布林挨踢頻道是專注於電腦科學相關的課程 每週四下午6點都有新的影片上線 如果聽完今天的單元覺得對你有幫助的話 請幫忙給影片按著讚並訂閱我們的頻道唷 ## 安裝Livewire 首先，我們來看一下 Livewire 2.0版本的基本需求為何? * PHP 7.2.5以上版本 * Laravel 7.0以上版本 要在你的Laravel專案去安裝Livewire，最簡單的做法就是透過composer工具，請輸入以下指令 `composer require livewire/livewire` 下載好套件之後，要把 Livewire 的樣式與前端程式載入視圖，很簡單，只要加入這些 Blade 指令即可 ``` <html> <head> ... @livewireStyles </head> <body> ... @livewireScripts </body> </html> ``` 你也可以改用以下的版本，結果相同 ``` <livewire:styles /> ... <livewire:scripts /> ``` 安裝的基本流程就到這裡，那接下來我們來看一些比較進階的安裝知識 ### 發布設定檔案 Livewire朝向零設定檔的架構來設計，但或許你會希望能夠更多的設定空間。你可以使用以下命令來將Livewire設定檔加入專案中 `php artisan livewire:publish --config` ### 發布前端素材 假如你希望JS前端素材不要透過Laravel來取得，而是透過像public這樣的開放資料夾，可以使用 livewire:publish 命令 `php artisan livewire:publish --assets` 為了確保素材能即時更新以避免後續更新造成的問題，強烈建議加入以下命令到 composer.json檔案內的 post-autoload-dump腳本中 ### 設定素材基礎網址 預設來說，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_base_url" 來調整src屬性裏頭的內容 也就是說，你需要發布 livewire 設定檔，並修改以下內容: ``` 'asset_url' => '/assets' 'asset_url' => '/application' ``` ## 建立組件 之前有說過，如果要建立一個新的 Livewire 組件，可以透過以下命令 `php artisan make:livewire ShowPosts` 但是 Livewire 同樣支援以中橫線的方式來命名組件，所以像下面這樣命名也是可以的 `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 組件，這是怎樣的組件勒?白話說就是將視圖內容直接寫在類別中而省去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; } } ``` 今天為大家帶來的 Livewire 的安裝以及建立組件的完整教學，如果你有任何想知道的或想與我分享的都歡迎在底下留言告訴我，那麼我們下次見囉 ## 影片介紹 今天為大家帶來的 Livewire 的安裝以及建立組件的完整教學，讓你學會如何為自己的Laravel專案加入MVVM架構 [laravel進階] Livewire快速入門 https://youtu.be/H346Fat-0V0 一頁式網站實作攻略 https://youtu.be/wXg0ZdH9Kl0 部落格網站實作攻略 https://youtu.be/Jv7JPnWwxYg ## 時間軸 基礎安裝知識 00:51 進階安裝知識 04:22 建立inline組件 11:32 ## 行銷稿 我是每天都會為你帶來實用Laravel知識的哥布林工程師，不曉得這些天所分享的Livewire知識你是否學會了勒? 不曉得為什麼要學 Livewire ? 你聽過那些當紅的前端框架，比如 Vue? 想要用 PHP做出相同的功能的話，你就不應該錯過 Livewire！ 如果看了但是不曉得該怎麼做的話，不用擔心，我將這些內容拍成了影片要與你分享。 從上周起每個禮拜都會有新的Livewire影片上線，如果你也想要把 Livewire 技能點給點上，就別忘了每週四下午六點準時收看唷 請看這週的新影片:Livewire完整安裝以及建立組件單元吧 https://youtu.be/uHgFVTnSl5g ＃訂閱哥布林挨踢頻道升級你的IT腦 ＃每週四下午6點從自虐中累積資識