# 快速上手

本指南将帮助你快速开始使用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/)学习更高级的功能