初始化提交

guide/essentials/README.md

@@ -0,0 +1,84 @@
+# 基础教程
+
+在本章节中，你将学习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引擎的使用方法。