Aurelia 框架入门教程

Aurelia 框架入门教程

frameworkThe Aurelia 1 framework entry point, bringing together all the required sub-modules of Aurelia.项目地址:https://gitcode.com/gh_mirrors/fra/framework

Aurelia 是一个现代、轻量级且灵活的前端JavaScript框架，用于构建单页应用程序(SPA)。下面我们将逐步了解如何安装并熟悉Aurelia框架。

1. 项目目录结构及介绍

Aurelia 项目的标准目录结构如下：

├── aurelia_project
│   ├── configurations
│   │   └── development.js         # 开发环境配置
│   ├── templates
│   │   ├── app.html                # 应用入口模板
│   │   ├── app.js                  # 应用入口脚本
│   │   ├── package.json            # 模板包依赖
│   ├── tools
│       └── build.js                # 构建脚本
├── src
│   ├── main.js                      # 应用主入口文件
│   └── index.html                   # HTML 入口文件
├── node_modules                     # 依赖库
└── package.json                     # 项目全局依赖

• aurelia_project: 存放Aurelia项目相关的配置和模板。
• src: 项目源代码目录，主要的业务逻辑和视图在这里定义。
• main.js: 应用程序的主要入口点，这里配置和初始化Aurelia应用。
• index.html: 网页的HTML入口文件，通常引入必要的资源和加载你的应用。

2. 项目的启动文件介绍

在Aurelia中，主要的启动文件是src/main.js。这个文件负责设置和启动Aurelia框架。例如，一个简单的main.js可能如下所示：

import { Aurelia } from 'aurelia-framework';
import environment from './environment';

export async function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  if (environment.debug) {
    aurelia.start().then(() => aurelia.setRoot());
  } else {
    aurelia.start().then(() => aurelia.setRoot('app', document.body));
  }
}

这里，configure函数接收一个Aurelia实例作为参数，然后进行配置，包括启用默认插件、日志记录等。最后，根据环境变量决定是否在调试模式下运行（只启动）或设置根组件（显示应用）。

3. 项目的配置文件介绍

aurelia_project/templaates/app.html 和 app.js

这两个文件通常是应用的根组件，app.html定义了视图，而app.js定义了对应的ViewModel。

例如，一个简单的app.html可能看起来像这样：

<template>
  <h1>${message}</h1>
  <button click.trigger="sayHello()">Say Hello</button>
</template>

对应的app.js：

import { inject } from 'aurelia-framework';

@inject(Element)
export class App {
  message = 'Welcome to Aurelia!';
  
  sayHello() {
    alert('Hello, world!');
  }
}

在这里，我们注入了Element，并定义了一个message属性以及一个点击事件处理函数sayHello()。

aurelia_project/configurations

该目录下的配置文件（如development.js）用于指定构建过程中的环境特定选项，例如启用源映射、优化等级等。这些配置会被build.js引用。

aurelia_project/tools/build.js

build.js是构建脚本，它使用Aurelia CLI定义的配置来编译、打包和优化项目。你可以定制这里的配置以满足不同需求，例如调整输出路径、添加额外的插件等。

以上是Aurelia框架的基本概念和目录结构，希望对理解和上手有所帮助。更多详细信息可以在Aurelia 文档中找到。祝你在Aurelia开发旅程中一切顺利！

frameworkThe Aurelia 1 framework entry point, bringing together all the required sub-modules of Aurelia.项目地址:https://gitcode.com/gh_mirrors/fra/framework