Aurelia 是一款优秀的前端 JavaScript 框架，它提供了强大的工具和功能来帮助我们快速构建复杂的单页应用程序。在本文中，我们将介绍如何使用 npm 包管理器来安装和使用 Aurelia。
安装和配置 Aurelia
首先，我们需要安装 Node.js 和 npm 包管理器。安装完成后，在命令行中运行以下命令来全局安装 Aurelia CLI：
npm install -g aurelia-cli
接着，我们可以使用 Aurelia CLI 来创建一个新项目。在命令行中输入以下命令：
au new my-app cd my-app au run --watch
此时，我们已经成功创建了一个名为 my-app 的项目，并启动了开发服务器。现在，我们可以在浏览器中打开 http://localhost:8080 来访问应用程序。
使用 Aurelia 组件
Aurelia 提供了一组强大的组件，用于构建单页应用程序。让我们看一下如何在项目中使用这些组件。
根组件
每个 Aurelia 应用程序都有一个根组件，它是所有其他组件的父组件。让我们创建一个名为 app 的根组件：
-- -------------------- ---- -------
----------
-------------------
-----------
--------
------ ----- --- -
------- - ------ --------
-
---------接着，我们需要在 main.ts 文件中引入根组件并启动 Aurelia：
-- -------------------- ---- -------
------ - ------- - ---- --------------------
------ - ----- - ---- -----------
----- ------- - --- ----------
-------
------------- -- -
------------------------------------
----------------------- -- ------------------------
---自定义组件
除了根组件之外，Aurelia 还允许我们创建自定义组件。让我们创建一个简单的自定义组件：
-- -------------------- ---- -------
----------
------- -------------------------------------------
-----------
--------
------ - -------- - ---- --------------------
------ ----- ------ -
--------- ------ -------
--------- -
------------------- -----------
-
-
---------然后，在另一个组件中使用这个自定义组件：
-- -------------------- ---- -------
----------
-------- --------------------------
------- ------------ --- -------------------------------------- -----------
------- ------------------------- -------------------------------------- -----------
------- --------------------------- -------------------------------------- -----------
------- --------------------- - - - - --------- -------------------------------------- -----------
------- ------------ --- --------------------------------------- -----------
-----------
--------
------ - ------ - ---- -----------
------ ----- ----------- -
------------ - -------- -------
----------- - -------- -------
--------- - -------
-------- - ------
------ - --- ---------
--------------- -
------------------- -----------
-
-
---------组件生命周期
每个 Aurelia 组件都有一个生命周期，在组件的不同阶段，Aurelia 会调用一系列钩子函数。让我们看一下这些钩子函数：
bind：在组件和其视图被绑定到 DOM 上之前调用。attached：在组件和其视图被绑定到 DOM 上后立即调用。detached：在组件和其视图从 DOM 中解除绑定之前立即调用。unbind：在组件和其视图从 DOM 中解除绑定之后立即调用。
让我们在自定义组件中添加这些
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38546