103 lines
2.1 KiB
Markdown
103 lines
2.1 KiB
Markdown
# 项目管理系统 - 前端
|
|
|
|
## 开发环境
|
|
|
|
### 安装依赖
|
|
```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` 中的方法
|