简介
@appt/core 是一款前端 JavaScript 框架，旨在更快、更容易地构建 Web 应用程序。 它具有简单、灵活和可扩展的特点，使得它成为开发者的首选框架。
该框架的核心特点如下：
- 简单的路由系统
- 支持组件化开发
- 视图抽象化，支持多种视图渲染引擎
- 支持单页面应用程序
本教程将深入探讨如何使用 @appt/core，并演示如何构建一个简单的单页面应用程序。
安装 @appt/core
使用 npm 安装
在终端或命令行工具中执行以下命令来安装 @appt/core:
npm install @appt/core
使用 CDN 引入
你也可以直接通过 CDN 引入 @appt/core，如下所示：
<script src="https://cdn.jsdelivr.net/npm/@appt/core"></script>
创建应用程序
在你的项目文件夹中创建一个新文件，命名为 app.js。 在 app.js 中，引入并初始化 @appt/core，代码如下：
import { App } from "@appt/core"; let app = new App();
现在你已经成功初始化了 @appt/core 应用程序。 接下来，我们将创建一个简单的页面来使用它。
创建页面
我们将在我们的应用程序中添加一个简单的页面。在你的项目文件夹中创建一个新文件，命名为 home.html，并添加如下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --- ---- ------------ ------- ------ ----------- -- -- --------- ------- -- --- ---- -------- ------- -------展开代码
创建控制器
为了在页面上正确显示内容，我们需要创建一个控制器来处理它。在你的项目文件夹中创建一个新文件，命名为 home.controller.js，并添加如下代码：
-- -------------------- ---- ------- ------ - ---------- - ---- ------------- ------ ------- ----- -------------- ------- ---------- - ------------- - -------- - ---------- ---- - ------------------- - -展开代码
这个代码将 HomeController 导出为默认的类，继承于 Controller。在 index 方法中，我们将 home 文件用作视图。
配置路由
现在我们已经有了一个控制器，但我们还需要将其与路由相关联。在 app.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ - --- - ---- ------------- ------ -------------- ---- ----------------------- --- --- - --- ------ --- -------------- - --- ----------------- -------------- ---------------------- ---------------- -- -- - ------------------- -- --------- -- ---- ------- ---展开代码
在这个代码中，我们导入了 HomeController 并在 app.route 方法中将其与根路由关联。最后，我们使用 app.listen 方法将应用程序监听在 3000 端口上。
运行应用程序
一切准备就绪，现在可以在终端或命令行工具中运行以下命令来启动应用程序：
node app.js
现在打开浏览器，输入 http://localhost:3000，你将看到一个欢迎页面。
总结
此教程深入介绍了如何使用 @appt/core 框架构建 Web 应用程序。我们创建了一个简单的控制器和路由来处理请求，并演示了如何构建一个简单的单页面应用程序。这个引导只是一个入门，作为您继续学习 @appt/core 的开端。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/197236
