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());
}

打印页面