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

應用程式將呈現到螢幕上。

列印頁面