Aurelia - 第一次申请

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

文件夹结构

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

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

  • config.js 是Aurelia加载程序配置文件.您不会花太多时间处理此文件.

  • jspm_packages SystemJS 的目录已加载的模块.

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

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

源文件

正如我们已经说过的那样, src 目录是您的应用程序逻辑所在的位置.如果您查看默认应用,可以看到 app.js app.html 非常简单.

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

app.js

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

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

app.html

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

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

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

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

Aurelia First App Start