1. 什么是 aurelia-skeleton-navigation
aurelia-skeleton-navigation 是 Aurelia 框架的一个官方 starter-kit，是一个使用 Aurelia 框架构建单页面应用程序（SPA）的最佳实践的脚手架。
该工具包括了一个简单的应用程序，包含了常见的导航、路由和页面结构。通过该包，您可以快速开始使用和学习 Aurelia 框架，构建自己的应用程序，特别适用于前端开发人员。
2. 如何安装 aurelia-skeleton-navigation
使用 npm 安装 aurelia-skeleton-navigation:
npm install aurelia-cli -g au new my-app cd my-app au run --watch
3. 如何使用 aurelia-skeleton-navigation
1. 添加路由和页面
要开始使用 aurelia-skeleton-navigation，首先需要添加新的页面。
为此，在 src/ 文件夹下创建一个新文件夹，命名为 pages/customer，并在该文件夹下创建 customer.html 和 customer.ts 两个文件:
<template>
<h1>${title}</h1>
<p>${content}</p>
</template>export class Customer {
title = 'Customer Page';
content = 'This is the customer page';
}接下来，在 src/app.html 中添加一个导航链接和路由：
<template> <require from="./nav-bar"></require> <nav-bar router.bind="router"></nav-bar> <router-view></router-view> </template>
-- -------------------- ---- -------
------ - ------- ------------------- - ---- -----------------
------ ----- --- -
------- -------
----------------------- -------------------- ------- ------- -
----------- - -------
------------ - ----------
------------
- ------ ------------ ----- ------- --------- ------- ---- ----- ------ ------ --
- ------ ----------- ----- ----------- --------- -------------------------- ---- ----- ------ ----------- -
---
-
-现在，我们就可以看到在应用程序上方添加了一个导航栏，并且在导航栏中，您可以看到一个 Customers 链接。当单击该链接时，将会打开 customer.html 页面。
2. 使用自定义元素和组件
aurelia-skeleton-navigation 支持自定义元素和组件，例如我们可以添加一些在所有页面上都可见的组件。
为此，可以在 src/ 文件夹下创建一个新的文件夹，命名为 components/navbar，并在该文件夹下创建 navbar.html 和 navbar.ts 两个文件。
<template>
<nav>
<a href="/">Home</a>
<a href="/customer">Customers</a>
</nav>
</template>export class Navbar { }现在，在 src/app.html 中添加 <require from="./components/navbar/navbar"></require>，并将其添加到 <nav-bar> 标记中，如下所示：
<template>
<require from="./nav-bar"></require>
<require from="./components/navbar/navbar"></require>
<nav-bar router.bind="router">
<navbar></navbar>
</nav-bar>
<router-view></router-view>
</template>现在我们可以在页面上看到一个新的导航栏链接，其中包含所有 navbar.html 页面上的链接和 <nav-bar> 标记。
3. 添加 HTTP 服务
在应用程序中为了获取远程数据，需要使用 HTTP 服务。
在 src/ 目录下新建一个文件夹，命名为 services，其中创建一个名为 customer.service.ts 的 TypeScript 文件:
-- -------------------- ---- -------
------ - ---------- - ---- ----------------------
------ - ---------- - ---- --------------------
-----------
------ ----- --------------- -
------------------- ----- ----------- - -
-------- -
------ ----------------------------
-
-添加 HTTP 服务后，我们将会使用 aurelia-fetch-client 或者 aurelia-http-client 这些插件进行服务的调用。例如，在您的 customer.html 文件中，可以这样使用：
-- -------------------- ---- -------
------ - --------------- - ---- ----------------------------------
------ - ---------- - ---- --------------------
-----------
------ ----- -------- -
----- - --------- ------
---------- ------
------------------- ---------------- ---------------- - -
---------- -
------ ------------------------------------------- -- -
-------------- - -----------------
---
-
-4. 结论
aurelia-skeleton-navigation 是一个非常方便，易于使用的 starter-kit 和应用程序模板，它有助于加速您使用 Aurelia 框架构建 SPA 的过程，并帮助管理整个应用程序的页面布局、导航、路由和组件的模式。在学习 Aurelia 时，它还是一个非常好的参考示例，建议您尝试使用并将其用于您的实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aac81e8991b448d83cc