Aurelia教程

Aurelia 第一个应用

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

文件夹结构

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

源文件

正如我们已经说过的, src 目录是保存应用逻辑的地方。如果您查看默认应用,您会发现 app.jsapp.html 非常简单。
Aurelia 允许我们使用 JavaScript 核心语言来定义类。以下默认示例显示 EC6 类。

app.js

export class App {
   message = 'Welcome to Aurelia!';
}
message 属性使用 ${message} 语法绑定到 HTML 模板。此语法表示单向绑定转换为字符串并显示在模板视图中。

app.html

<template>
   <h1>${message}</h1>
</template>
正如我们在上一章中已经讨论过的,我们可以通过在 命令提示符窗口中运行以下命令来启动服务器。
C:\Users\username\Desktop\aureliaApp>http-server-o-c-1
应用程序将呈现在屏幕上。
Aurelia First App Start
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4