yunzer/frontend/README.md

项目管理系统 - 前端

开发环境

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

类型检查

npm run type-check

部署说明

1. 构建项目

npm run build

2. 部署方式

方式一：直接部署 dist 目录

将 dist 目录中的所有文件复制到 Web 服务器的根目录或子目录中。

方式二：使用静态文件服务器

# 使用 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 文件配置环境变量：

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 中的方法