Aurelia - 首个应用程序

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

文件夹结构

package.json 表示已安装的 npm 包的相关文档。它还显示这些包的版本，并提供了一种简单的方法来添加、删除、更改版本或在需要在开发人员之间共享应用程序时自动安装所有包。
index.html 是应用程序的默认页面，就像大多数基于 HTML 的应用程序一样。它是加载脚本和样式表的地方。
config.js 是 Aurelia 加载器配置文件。您不会花太多时间处理此文件。
jspm_packages 是 SystemJS 加载的模块的目录。
styles 是默认的样式目录。您可以随时更改保存样式文件的位置。
src 文件夹是您将花费大部分开发时间的地方。它保存 HTML 和 js 文件。

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

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

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

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

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

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

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

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

打印页面