107 lines
2.6 KiB
Markdown
107 lines
2.6 KiB
Markdown
# 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/)
|