# prefab-template
**Repository Path**: thingjs-code-temp/prefab-template
## Basic Information
- **Project Name**: prefab-template
- **Description**: 预制件单包工程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-24
- **Last Updated**: 2023-08-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
> 预制件（Prefab）是一个预先设定好的，带有行为的对象模板，用于生成经常被重复创建的对象.
>
> 目前该模板工程支持单个预制件的开发，`src` 目录包含了一个完整的预制件。通过 `npm run build` 命令打包后，将在 `dist` 目录下生成打包完毕的预制件文件内容。通过 `new THING.Entity`加载`dist`目录下的`prefab.json`文件即可创建该预制件
## 📖 开发指南
```bash
# 安装依赖包
npm i
# 启动开发服务
npm run dev
# 打包项目
npm run build
# 将预制件发布到资源商城中
npm run publish
```
## 🔨 开发规范
- [ThingJS 预制件开发指导手册](https://wiki.uino.com/book/prefab)
## 🔻 目录结构
```
prefab-template
├─ .gitignore
├─ index.html # 静态页面
├─ package.json
├─ README.md
├─ src # 此目录下为单个完整的预制件资源
│ ├─ blueprints # 预制件蓝图目录
│ ├─ components # 预制件组件目录
│ ├─ images # 图片资源文件
│ ├─ index.js # 预制件入口文件
│ ├─ models # 预制件模型资源
│ └─ prefab.json # 预制件配置文件，在npm run dev并打开页面时自动生成
└─ vite.config.js # vite配置文件
```
## 🔨 本地测试
当在src文件夹内完成一个预制件的开发之后，对该预制件进行打包，得到dist目录，之后就可以在其他工程当中对该预制件进行使用。以本地新建一个文件prefab-test为例，使用步骤如下：
### 🔻 获取 dist 目录
```
npm run build
```
### 🔻 dist 目录结构
```
├─ dist
│ ├─ blueprints # 预制件蓝图目录
│ ├─ images # 图片资源文件
│ ├─ models # 预制件模型资源
│ ├─ defineProperty.js
│ ├─ defineProperty.js.map
│ ├─ index.js # 预制件入口文件
│ ├─ index.js.map
│ └─ prefab.json # 预制件配置文件，在npm run dev并打开页面时自动生成
```
### 🔻 引入
- 新建文件夹：prefab-local；
- 在 prefab-local 下创建文件 index.html，并拖入上述 dist 文件；
- 得到目录结构：
```
prefab-local
├─ dist
├─ index.html
```
### 🔻 使用
```html
prefab-simple
```
### 🔻 运行
使用 vscode 编译器时，在 index.html 文件内右键选择 open with live server 即可看到运行结果。
