在 Laravel 中搭配 Async Vue Component 使用
4

在 Laravel 中,如果是基於要和使用者互動操作的一些介面(元件),透過撰寫 Vue Component 可以很方便地在各個 Laravel Blade 中輕鬆地透過 <Component /> 的 tag 方式來重複使用 Vue Component。

目前在 Laravel 的前端打包工具大部分都是透過 laravel-mix 做整合,前陣子也才幫系統的 laravel-mix 升級到 2.0.0 版本,基本上是無痛升級;在去年的「從 laravel-mix 0.8 升級到 1.4 版的記錄與坑」這邊文章提到使用「async/await」的方式現在也不需要安裝額外的 babel-plugin 也都可以使用了,而且現在 Laravel 內你也不需要建立 .babelrc 來設定相關 babel 的設定。

這次主要記錄是怎麼在 Laravel 中設定並使用「非同步載入 的 Vue Component」Vue.js 官方文件在 Component 部分也有對於 Async Component 也有相關解釋,如果不太了解的話,可以參考一下。

簡單說明一下,在大型的 Application 我們可能會有許多的程式碼,但是我們希望不要一次把所有的程式碼都給打包起來,這樣會造成 bundle 的檔案過大,網頁在載入時會比較慢,而且並不是每個程式碼都會被頁面所需要,這時候我們可以拆分(chunk)程式碼成不同的 bundle 檔案(a.k.a Code Splitting),可以在需要的時候「動態」引入(Dynamic import)進來。

修改 Vue Component 的引入方式

在 Laravel 我們通常會在 /resource/assets/js/app.js 來引入我們的 Vue Component:

這裡的檔案路徑根據官方預設的路徑來做說明。

import FooComponent from './components/FooComponent.vue';

Vue.component('foo-component', FooComponent);

Vue.component 的第二個參數接收一個 factory callback function,當你向伺服器發出請求取得 Component 時,會從這裡的 callback function 來執行,factory function 有兩個參數,也就是 Promiseresolvereject,所以當你要載入 Component 時可以透過 resolve 或者你也可以使用 reject function 來說明載入 Component 為什麼失敗:

Vue.component('foo-component', (resolve, reject) => {/* ... */});

或者你也可以使用 ES6 的 import 語法:

Vue.component('foo-component', () => import('./components/FooComponent.vue'));

這裡為了確保可以執行,我們需要安裝額外的 babel plugin - Syntax Dynamic Import

yarn add babel-plugin-syntax-dynamic-import --dev

接著在 .babelrc 內設定好 plugins

{
  "plugins": ["syntax-dynamic-import"]
}

如果你升級到了 laravel-mix 2.0 版本,你可以直接透過 mix.babelConfig() 來直接設定 babel 的設定,更多請參考 laravel-mix 的 Release


更詳細內容請點我看部落格原文!

《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!