# Vue 3 + TypeScript + Vite + BabylonJS 项目模板

## 项目简介

这是一个基于 Vue 3、TypeScript 和 Vite 构建的 3D 可视化项目。本项目使用 BabylonJS 作为 3D 引擎，结合 Vue 3 的 `<script setup>` 语法糖，提供了现代化的 Web3D 开发环境。

## 技术栈

### 核心框架
- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - JavaScript 的超集，添加了类型系统
- Vite - 下一代前端构建工具

### 3D 引擎与工具
- BabylonJS 7.32 - 强大的 Web3D 引擎
- BabylonJS Loaders - 用于加载 3D 模型和资源
- Stats.js - 性能监控工具

### UI 框架
- Element Plus - 基于 Vue 3 的组件库
- Vant - 移动端组件库

### 开发工具
- GLSL 着色器支持 (vite-plugin-glsl)
- Monaco Editor - 代码编辑器集成
- Sass - CSS 预处理器

## 项目功能

- 3D 场景渲染与交互
- 自定义着色器支持（shader 目录）
- 性能监控和优化
- 响应式界面设计
- 代码编辑器集成

## 开发环境设置

### 环境要求

- Node.js 版本 >= 14.0.0
- npm 版本 >= 6.0.0

### 推荐的 IDE 配置

- [VSCode](https://code.visualstudio.com/) - 轻量级但功能强大的编辑器
- [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 的官方 VSCode 插件

## 项目启动步骤

1. 安装依赖
```bash
npm install
```

2. 启动开发服务器
```bash
npm run dev
```

3. 构建生产版本
```bash
npm run build
```

## 项目结构

```
src/
├── api/         # API 接口定义
├── assets/      # 静态资源文件
├── components/  # Vue 组件
├── global/      # 全局配置和工具
├── shader/      # GLSL 着色器文件
├── types/       # TypeScript 类型定义
├── view/        # 页面视图组件
└── App.vue      # 根组件
```

## 开发规范

- 组件文件使用 PascalCase 命名
- TypeScript 文件使用 camelCase 命名
- 样式文件使用 kebab-case 命名
- 着色器文件使用 .glsl 或 .shader 扩展名

## 性能优化

- 使用 vite-plugin-compression 进行资源压缩
- 通过 Stats.js 监控性能指标
- 支持代码分割和懒加载
- 针对移动端的优化配置

## 注意事项

- 开发时请确保启用了 Volar 并禁用了 Vetur
- 建议使用 Vue 3 的组合式 API 进行开发
- 3D 模型推荐使用 glTF/glb 格式
- 确保在提交代码前运行类型检查和代码格式化

## 相关文档

- [Vue 3 文档](https://v3.cn.vuejs.org/)
- [BabylonJS 文档](https://doc.babylonjs.com/)
- [TypeScript 文档](https://www.typescriptlang.org/)
- [Element Plus 文档](https://element-plus.org/zh-CN/)
- [Vite 文档](https://cn.vitejs.dev/)