初始化提交

2025-10-03 16:49:53 +08:00
parent 157ca32e2d
commit bdd67a65fa
1066 changed files with 373311 additions and 261 deletions
--- a/guide/quick-start.md
+++ b/guide/quick-start.md
@@ -0,0 +1,216 @@
+# 快速上手
+
+本指南将帮助你快速开始使用PE引擎创建你的第一个应用。
+
+## 创建一个简单的PE应用
+
+### 1. 安装
+
+首先，创建一个新的项目目录并初始化npm：
+
+```bash
+mkdir my-pe-app
+cd my-pe-app
+npm init -y
+```
+
+然后安装PE引擎：
+
+```bash
+npm install pe-engine
+```
+
+### 2. 创建HTML文件
+
+在项目根目录下创建`index.html`文件：
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>我的PE应用</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/main.js"></script>
+</body>
+</html>
+```
+
+### 3. 创建主JavaScript文件
+
+创建`main.js`文件：
+
+```javascript
+import PE from 'pe-engine'
+
+// 创建应用实例
+const { game } = PE.create()
+
+// 添加一个简单的精灵
+const sprite = game.create('sprite')
+sprite.setPosition(100, 100)
+sprite.setSize(100, 100)
+
+// 设置精灵样式
+sprite.element.style.backgroundColor = '#3498db'
+sprite.element.style.borderRadius = '50%'
+```
+
+### 4. 启动开发服务器
+
+安装Vite作为开发服务器：
+
+```bash
+npm install -D vite
+```
+
+在`package.json`中添加脚本：
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  }
+}
+```
+
+启动开发服务器：
+
+```bash
+npm run dev
+```
+
+现在你应该能在浏览器中看到一个蓝色的圆形精灵了！
+
+## 使用场景系统
+
+PE引擎提供了强大的场景系统，让你可以轻松管理不同的应用状态。
+
+### 1. 创建场景目录结构
+
+```
+project/
+├── index.html
+├── main.js
+├── scenes/
+│   ├── home/
+│   │   ├── index.pe
+│   │   └── index.less
+│   └── about/
+│       ├── index.pe
+│       └── index.less
+└── styles/
+    └── base.less
+```
+
+### 2. 创建场景配置文件
+
+创建`scenes.json`文件来定义路由：
+
+```json
+{
+  "scenes": [
+    {
+      "path": "/",
+      "title": "主页"
+    },
+    {
+      "path": "/about",
+      "title": "关于"
+    }
+  ]
+}
+```
+
+### 3. 创建场景文件
+
+创建`scenes/home/index.pe`：
+
+```html
+<sence>
+  <box class="welcome-box">欢迎来到PE引擎!</box>
+  <sprite class="logo"></sprite>
+  <box class="nav-button" @click="PE.navigateTo('/about')">关于我们</box>
+</sence>
+
+<script>
+onLoad(() => {
+  console.log('主页加载完成')
+})
+
+onShow(() => {
+  console.log('主页显示')
+})
+</script>
+```
+
+创建`scenes/home/index.less`：
+
+```less
+.welcome-box {
+  width: 300px;
+  height: 100px;
+  background-color: #2c3e50;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  position: absolute;
+  top: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 8px;
+}
+
+.logo {
+  width: 150px;
+  height: 150px;
+  background-color: #3498db;
+  border-radius: 50%;
+  position: absolute;
+  top: 250px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.nav-button {
+  width: 200px;
+  height: 50px;
+  background-color: #e74c3c;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 4px;
+  cursor: pointer;
+}
+```
+
+### 4. 更新主文件
+
+更新`main.js`以使用场景系统：
+
+```javascript
+import './styles/base.less'
+import PE from 'pe-engine'
+
+// PE引擎会自动加载scenes.json中的路由配置
+// 并根据路由显示相应的场景
+```
+
+现在你已经创建了一个基本的PE应用，它使用场景系统来管理不同的视图。
+
+## 下一步
+
+- 阅读[基础教程](./essentials/)了解PE引擎的核心概念
+- 查看[API参考](./api/)了解所有可用的API
+- 探索[进阶主题](./advanced/)学习更高级的功能