# Spring-Ai-Demo-web

**Repository Path**: jingangxiake/spring-ai-demo-web

## Basic Information

- **Project Name**: Spring-Ai-Demo-web
- **Description**: 对应Spring-Agent-Demo简单调试ui
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-28
- **Last Updated**: 2025-03-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# Spring-Ai-Demo-web

## 项目介绍
Spring-Ai-Demo-web 是一个基于 Vue 3 的前端项目，作为 Spring-Ai-Demo 的配套 Web 界面，提供了友好的用户交互界面，用于展示和使用 AI 对话功能。

## 技术架构
- Vue 3 - 渐进式 JavaScript 框架
- Vite - 下一代前端构建工具
- Element Plus - 基于 Vue 3 的组件库
- Axios - HTTP 客户端

## 主要功能
- AI 助手实时对话界面
- 响应式布局设计
- 与后端 API 无缝集成
- 用户友好的操作体验

## 快速开始

### 环境要求
- Node.js >= 14.0.0
- npm >= 6.14.0

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

### 开发模式运行
```bash
npm run dev
```

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

### 预览生产构建
```bash
npm run preview
```

## 项目配置

### 后端接口代理
项目默认配置了后端接口代理，详见 `vite.config.js`：
```javascript
proxy: {
  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
}
```

## 开发指南
1. 本地开发时，确保后端服务 (Spring-Ai-Demo) 已启动
2. 启动开发服务器后，访问 http://localhost:5173
3. 所有对后端的请求都会通过 `/api` 前缀自动代理

## 目录结构
```
├── src/                # 源代码目录
├── public/            # 静态资源
├── index.html         # HTML 入口文件
├── vite.config.js     # Vite 配置文件
├── package.json       # 项目配置文件
└── README.md         # 项目说明文档
```

## 注意事项
- 开发时请确保后端服务正常运行
- 如需修改后端接口地址，请更新 `vite.config.js` 中的代理配置
- 建议使用 VSCode 进行开发，并安装 Volar 插件以获得更好的 Vue 3 开发体验

## 相关链接
- [Vue 3 文档](https://v3.cn.vuejs.org/)
- [Vite 文档](https://cn.vitejs.dev/)
- [Element Plus 文档](https://element-plus.org/zh-CN/)