# 项目管理系统 - 前端

## 开发环境

### 安装依赖
```bash
npm install
```

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

### 构建生产版本
```bash
npm run build
```

### 类型检查
```bash
npm run type-check
```

## 部署说明

### 1. 构建项目
```bash
npm run build
```

### 2. 部署方式

#### 方式一：直接部署 dist 目录
将 `dist` 目录中的所有文件复制到 Web 服务器的根目录或子目录中。

#### 方式二：使用静态文件服务器
```bash
# 使用 serve 包
npx serve dist

# 或使用 http-server
npx http-server dist
```

### 3. 环境配置

项目已配置为支持子目录部署，主要配置：

- **基础路径**: `./` (相对路径)
- **路由模式**: Hash 模式 (`#`)
- **API 地址**: `https://api.yunzer.com.cn`

### 4. 注意事项

1. **资源路径**: 所有静态资源都使用相对路径，支持任意目录部署
2. **路由**: 使用 Hash 路由，无需服务器端配置
3. **API**: 确保 API 服务器 `api.yunzer.com.cn` 可访问
4. **HTTPS**: 生产环境建议使用 HTTPS

### 5. 环境变量

可以通过 `.env` 文件配置环境变量：

```env
VITE_APP_TITLE=项目管理系统
VITE_APP_API_BASE_URL=https://api.yunzer.com.cn
VITE_APP_API_TIMEOUT=10000
VITE_APP_ENV=production
```

## 技术栈

- **框架**: Vue 3 + TypeScript
- **构建工具**: Vite
- **UI 组件**: Element Plus
- **状态管理**: Pinia
- **路由**: Vue Router
- **HTTP 客户端**: Axios

## 项目结构

```
src/
├── api/          # API 接口
├── assets/       # 静态资源
├── components/   # 公共组件
├── config/       # 配置文件
├── router/       # 路由配置
├── store/        # 状态管理
├── types/        # 类型定义
├── utils/        # 工具函数
└── views/        # 页面组件
```

## 开发规范

1. **代码风格**: 使用 ESLint + Prettier
2. **类型检查**: 使用 TypeScript 严格模式
3. **组件命名**: 使用 PascalCase
4. **文件命名**: 使用 kebab-case
5. **API 调用**: 统一使用 `@/api` 中的方法