You've already forked Pandona-Engine
216 lines
3.7 KiB
Markdown
216 lines
3.7 KiB
Markdown
# 快速上手
|
||
|
||
本指南将帮助你快速开始使用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/)学习更高级的功能 |