第一次申请（First Application）

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

文件夹结构

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

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

• config.js是Aurelia loader配置文件。 您不会花太多时间处理此文件。

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

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

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

源文件

正如我们已经说过的那样， src目录是您的app逻辑所在的位置。 如果您查看默认应用程序，您会发现app.js和app.html非常简单。

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

app.js

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

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

app.html

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

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

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

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