# 快速上手
本指南将帮助你快速开始使用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
我的PE应用
```
### 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
欢迎来到PE引擎!
关于我们
```
创建`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/)学习更高级的功能