# 基础教程

在本章节中，你将学习PE引擎的核心概念。我们假定你已经完成了[快速上手](../quick-start)指南，并对HTML、CSS和JavaScript有基本的了解。

## 目录

- [创建应用实例](./application)
- [元素系统](./elements)
- [场景系统](./scenes)
- [样式处理](./styling)
- [事件处理](./event-handling)
- [生命周期](./lifecycle)

## 什么是PE引擎？

PE（Pandona Engine）是一个现代化的前端应用开发框架，专注于提供简洁的API和高效的开发体验。它采用编译时架构，支持基于路由表的场景管理，让开发者能够快速构建交互式Web应用。

PE的核心特性包括：

1. **基于路由的场景管理**：通过简单的路由配置，轻松管理应用的不同状态和视图。
2. **声明式模板语法**：使用类似HTML的模板语法，让代码更直观易懂。
3. **组件化开发**：将UI拆分为独立的可复用组件，提高代码的可维护性。
4. **内置动画系统**：提供丰富的动画API，轻松实现流畅的交互动画。
5. **响应式数据绑定**：自动追踪数据变化，确保UI与数据保持同步。
6. **强大的样式系统**：支持CSS预处理器，提供灵活的样式管理方案。

## 核心概念概览

在深入了解每个概念之前，让我们先快速了解一下PE引擎的核心概念：

### 应用实例

每个PE应用都从创建一个应用实例开始：

```javascript
import PE from 'pe-engine'

const game = PE.create()
```

这个实例包含了所有PE引擎的功能，是整个应用的核心。

### 元素系统

PE提供了丰富的内置元素类型，包括：

- `sprite`：精灵元素，可用于显示图像或创建基本图形
- `box`：盒子元素，用于创建矩形区域
- `text`：文本元素，用于显示文本内容
- `html`：HTML元素，用于嵌入原生HTML内容
- `svg`：SVG元素，用于创建矢量图形

### 场景系统

场景是PE应用的基本构建块。每个场景对应一个路由路径，包含：

- 模板定义（`<sence>`标签）
- 样式定义（`.less`文件）
- 逻辑代码（`<script>`标签）

### 样式处理

PE使用Less作为CSS预处理器，每个场景可以有对应的样式文件。样式会自动作用于场景内的元素，避免全局样式污染。

### 事件处理

PE提供简洁的事件绑定语法，通过`@`前缀可以直接在模板中绑定事件处理器：

```html
<box @click="handleClick">点击我</box>
```

### 生命周期

每个场景都有完整的生命周期钩子，包括：

- `onLoad`：场景加载时调用
- `onShow`：场景显示时调用
- `onHide`：场景隐藏时调用
- `onDestory`：场景销毁时调用

这些钩子让你能够在适当的时机执行初始化、清理等操作。

在接下来的章节中，我们将深入探讨这些概念，帮助你掌握PE引擎的使用方法。