init

README.md

@@ -0,0 +1,106 @@
+# 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/)