# madong-ui-admin-vben

**Repository Path**: motion-code/madong-ui-admin-vben

## Basic Information

- **Project Name**: madong-ui-admin-vben
- **Description**: 基于vben5.0  Vue 3 + Vite 的现代化管理后台前端框架，专为对接 Madong 4.1+ 版本后端服务设计。采用 Composition API 和 TypeScript 开发，提供响应式布局和实时通信功能。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://madong.tech
- **GVP Project**: No

## Statistics

- **Stars**: 36
- **Forks**: 12
- **Created**: 2024-10-16
- **Last Updated**: 2025-10-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, Vue, Ant-Design, vben, madong

## README

# Madong UI Admin Vben 文档

![Vue3](https://img.shields.io/badge/Vue-3.x-42b983?logo=vue.js)
![Vite](https://img.shields.io/badge/Vite-4.x-646cff?logo=vite)
![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178c6?logo=typescript)
![Pinia](https://img.shields.io/badge/Pinia-2.x-ffd700?logo=pinia)

## 项目概述
基于 Vue 3 + Vite 的现代化管理后台前端框架，专为对接 Madong 4.1+ 版本后端服务设计。采用 Composition API 和 TypeScript 开发，提供响应式布局和实时通信功能。

## 环境要求
| 依赖项      | 版本要求  |
|-------------|----------|
| Node.js     | 20.0+    |
| pnpm        | 9.0+     |
| 浏览器      | Chrome 90+, Firefox 88+, Safari 14+, Edge 90+ |

## 快速开始

### 1. 安装依赖

```bash
pnpm install
```

### 2. 环境配置
创建 .env.development 文件：

```bash
VITE_API_BASE_URL=http://127.0.0.1:8001
VITE_WS_BASE_URL=ws://127.0.0.1:3001
```

### 3. 启动开发服务器
```bash
pnpm dev
```

### 4. 构建生产版本
```bash
pnpm build
```

## 后端服务配置
版本要求: Madong 4.1+
REST API: http://127.0.0.1:8001
WebSocket: ws://127.0.0.1:3001

功能特性
✅ Vue 3 + Composition API
✅ Vite 快速构建（HMR支持）
✅ 响应式布局设计
✅ WebSocket 实时通信
✅ JWT 认证体系
✅ TypeScript 类型支持
✅ Pinia 状态管理
✅ 国际化支持
✅ 主题切换
✅ 权限控制

## 常见问题
连接失败
确认后端服务正常运行（检查端口 8001 和 3001）
检查防火墙设置
验证网络连接
使用 telnet 127.0.0.1 8001 测试端口连通性

## CORS 错误
- 确保后端配置了正确的 CORS 策略
- 开发环境已配置 Vite 代理：

``` ts
// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})
```

## 类型错误
确保所有组件和API都有完整的TypeScript类型定义
运行 pnpm type-check 检查类型