Aurelia - 第一次应用

在本章中，我们将解释 Aurelia 启动在上一章中创建的应用程序。我们还将引导您了解文件夹结构，以便您能够掌握 Aurelia 框架背后的核心概念。

文件夹结构

  • package.json表示有关已安装的npm包的文档。它还显示这些软件包的版本，并在应用程序需要在开发人员之间共享时提供一种简单的方法来添加、删除、更改版本或自动安装所有软件包。

  • 像大多数基于 HTML 的应用程序一样，index.html是应用程序的默认页面。这是加载脚本和样式表的地方。

  • config.js是 Aurelia 加载器配置文件。您不会花费太多时间处理该文件。

  • jspm_packages是SystemJS加载模块的目录。

  • styles是默认的样式目录。您可以随时更改保存样式文件的位置。

  • src文件夹是您将花费大部分开发时间的地方。它保存HTML和js文件。

源文件

正如我们已经说过的，src目录是保存应用程序逻辑的地方。如果您查看默认应用程序，您会发现app.js和app.html非常简单。

Aurelia 允许我们使用 JavaScript 核心语言进行类定义。以下默认示例显示 EC6 类别。

应用程序.js

export class App {
   message = 'Welcome to Aurelia!';
}

message属性使用${message}语法绑定到 HTML模板。此语法表示转换为字符串并显示在模板视图内的单向绑定。

应用程序.html

<template>
   <h1>${message}</h1>
</template>

正如我们在上一章中已经讨论过的，我们可以通过在命令提示符窗口中运行以下命令来启动服务器。

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

应用程序将呈现在屏幕上。

Aurelia 第一个应用程序启动