Aurelia - 外掛

當您開始構建應用程式時，大多數情況下您會想要使用一些額外的外掛。本章將學習如何在 Aurelia 框架中使用外掛。

標準外掛

在上一章中，我們看到了如何在 Aurelia 框架中使用預設配置。如果您使用預設配置，則可以使用標準的外掛集。

defaultBindingLanguage() − 此外掛提供了一種將檢視模型與檢視連線的簡單方法。您已經看到了單向資料繫結語法(${someValue})。即使您可以使用其他繫結語言，也建議使用預設繫結語言。
defaultResources() − 預設資源為我們提供了一些原語結構，例如if、repeat、compose等。您甚至可以自己構建這些結構，但是由於它們非常常用，Aurelia 已經在該庫中建立了它們。
Router() − 大多數應用程式都使用某種路由。因此，Router是標準外掛的一部分。您可以在後續章節中檢視有關路由的更多資訊。
History() − History 外掛通常與router一起使用。
eventAggregator() − 此外掛用於跨元件通訊。它處理在應用程式內釋出和訂閱訊息或通道。

官方外掛

這些外掛不是預設配置的一部分，但經常使用。

fetch() − Fetch 外掛用於處理 HTTP 請求。如果需要，您可以使用其他 AJAX 庫。
animatorCSS() − 此外掛提供了一種處理 CSS 動畫的方法。
animator-velocity() − 您可以使用 Velocity 動畫庫代替 CSS 動畫。這些外掛使我們能夠在 Aurelia 應用程式中使用 Velocity。
dialog() − Dialog 外掛提供了一個高度可定製的模態視窗。
i18n() − 這是用於國際化和本地化的外掛。
ui-virtualization() − 虛擬化是一個有用的庫，用於處理大型效能密集型 UI 任務。
validation() − 當您需要驗證資料時，請使用此外掛。

上面解釋的所有外掛在撰寫本教程時都由 Aurelia 核心團隊正式維護。將來還會新增一些其他有用的外掛。以下示例顯示如何配置應用程式以使用外掛。

安裝外掛

例如，如果我們想使用animator-css和animator-velocity，我們需要先安裝它。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-css
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-velocity

在上一章中，您學習瞭如何使用手動配置。我們可以在main.js檔案中新增我們的外掛。

main.js

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin('aurelia-animatorCSS')
   .plugin('aurelia-animator-velocity')

   aurelia.start().then(() => aurelia.setRoot());
}

列印頁面