# SpringAI-Alibaba-SpringBoot-Vue **Repository Path**: ArrayEdu/spring-ai-alibaba-spring-boot-vue ## Basic Information - **Project Name**: SpringAI-Alibaba-SpringBoot-Vue - **Description**: 前端：SpringBoot3+SpringAI+SpringAI Alibaba等整合教程 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-25 - **Last Updated**: 2025-12-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Ruoyi-Element-AI 技术栈分析教程 ## 📋 项目概述 源码对应的教程（以下任选其一，需要自取）： B站：https://www.bilibili.com/cheese/play/ss537533106 网易云课堂：https://study.163.com/course/courseMain.htm?courseId=1213833867&share=2&shareId=1023275352 51CTO：https://edu.51cto.com/course/39658.html 前端：https://github.com/arraycto/Springai-Alibaba-SpringBoot-Vue.git 后端：https://bgithub.xyz/arraycto/Springai-Alibaba-SpringBoot-API.git **Ruoyi-Element-AI** 是一个基于 Vue3.5 + Element-Plus-X + TypeScript 开发的企业级AI应用模板，专为构建仿豆包/通义的全栈AI项目而设计。 ### 🎯 项目定位 - **企业级AI应用模板**: 提供完整的AI聊天应用前端解决方案 - **现代化技术栈**: 采用最新的前端技术和开发规范 - **开箱即用**: 内置丰富的组件库和工具链，快速启动项目 ## 🏗️ 技术栈架构 ### 🚀 技术选型亮点与更改 #### 🔄 重大技术升级 - **Vue 3.5+**: 使用最新的Vue版本，支持Composition API和更好的TypeScript集成 - **Vite 6.0+**: 升级到Vite 6，带来更快的构建速度和更好的开发体验 - **TypeScript 5.8+**: 采用最新的TypeScript版本，提供更强的类型安全 #### ⚡ 核心技术创新 - **Hook-Fetch替代Axios**: 弃用传统的Axios，采用支持SSE流式请求的Hook-Fetch - **UnoCSS原子化样式**: 使用高性能的原子化CSS引擎，替代传统的CSS预处理器 - **Element Plus X增强组件库**: 基于Element Plus的定制化增强版本 ### 📊 前端技术栈详情 | 技术领域 | 技术选型 | 版本 | 说明 | 优势 | |---------|---------|------|------|------| | **框架** | Vue 3.5 | 3.5.17 | 最新Vue3版本 | Composition API + 更好的TS支持 | | **构建工具** | Vite 6 | 6.0.0 | 下一代前端构建工具 | 极速热更新 + 按需编译 | | **UI组件库** | Element Plus X | 1.3.0 | 增强版Element Plus | 定制化组件 + 更好的主题支持 | | **状态管理** | Pinia 3 | 3.0.3 | Vue官方推荐 | 轻量级 + 类型安全 + 持久化 | | **路由管理** | Vue Router 4 | 4.x | 现代化路由管理 | 动态路由 + 权限控制 | | **类型系统** | TypeScript | 5.8.3 | 强类型语言 | 完整的类型支持 + 更好的开发体验 | | **HTTP客户端** | Hook-Fetch | 2.0.4-beta.1 | 现代化fetch封装 | **SSE流式支持** + 插件化架构 | | **原子化CSS** | UnoCSS | 66.3.3 | 高性能CSS引擎 | 按需生成 + 极小的打包体积 | | **样式预处理器** | Sass/SCSS | 1.89.2 | CSS扩展语言 | 变量 + 嵌套 + 混合器 | ### 🔧 企业级开发工具链 #### 📋 完整的代码质量保障体系 - **ESLint 9**: 最新版本的代码质量检查工具 - **Stylelint 16**: 专业的样式代码规范检查 - **Prettier**: 自动代码格式化，确保代码风格统一 #### 🔒 Git工作流规范 - **Husky**: Git钩子管理，自动化执行代码检查 - **Commitlint**: 提交信息规范，确保提交信息格式统一 - **Lint-staged**: 暂存区文件检查，只检查修改的文件 #### 📊 工具链配置详情 | 工具 | 版本 | 用途 | 配置文件 | 优势 | |------|------|------|----------|------| | ESLint | 9.31.0 | 代码质量检查 | `eslint.config.js` | 最新配置 + 自动修复 | | Stylelint | 16.21.1 | 样式代码规范 | `.stylelintrc.cjs` | Vue文件支持 + SCSS支持 | | Prettier | 3.6.2 | 代码格式化 | 集成配置 | 统一代码风格 | | Husky | 9.1.7 | Git钩子管理 | `.husky/` | 自动化工作流 | | Commitlint | 19.8.1 | 提交信息规范 | `.commitlintrc.cjs` | 规范化提交 | | Lint-staged | 16.1.2 | 暂存区检查 | `.lintstagedrc` | 高效检查 | ## 📁 项目目录结构 ``` richqi-ai/ ├── public/ # 静态资源目录 ├── src/ # 源代码目录 │ ├── api/ # API接口层 │ │ ├── auth/ # 认证相关API │ │ ├── chat/ # 聊天相关API │ │ ├── model/ # 模型相关API │ │ └── session/ # 会话相关API │ ├── assets/ # 静态资源 │ │ ├── icons/ # SVG图标库 │ │ └── images/ # 图片资源 │ ├── components/ # 公共组件 │ │ ├── DeepThinking/ # 深度思考组件 │ │ ├── FilesSelect/ # 文件选择组件 │ │ ├── IconSelect/ # 图标选择组件 │ │ ├── LoginDialog/ # 登录弹窗组件 │ │ ├── ModelSelect/ # 模型选择组件 │ │ ├── Popover/ # 弹出框组件 │ │ ├── SvgIcon/ # SVG图标组件 │ │ └── WelecomeText/ # 欢迎文本组件 │ ├── config/ # 配置文件 │ ├── constants/ # 常量定义 │ ├── hooks/ # 自定义Hooks │ ├── layouts/ # 布局组件 │ │ ├── components/ # 布局子组件 │ │ ├── LayoutMobile/ # 移动端布局 │ │ └── LayoutVertical/ # 垂直布局 │ ├── pages/ # 页面组件 │ │ ├── chat/ # 聊天页面 │ │ └── error/ # 错误页面 │ ├── routers/ # 路由配置 │ │ └── modules/ # 路由模块 │ ├── stores/ # 状态管理 │ │ └── modules/ # Store模块 │ ├── styles/ # 样式文件 │ └── utils/ # 工具函数 ├── types/ # TypeScript类型定义 └── 配置文件 ├── vite.config.mts # Vite配置 ├── tsconfig.json # TypeScript配置 ├── package.json # 项目依赖 └── uno.config.ts # UnoCSS配置 ``` ## 🔧 核心功能模块详解 ### 1. 🚦 路由系统 (`src/routers/`) **技术实现特点:** - **混合路由模式**: 静态路由 + 动态路由组合 - **智能权限控制**: 基于Token的自动路由守卫 - **白名单机制**: 配置免登录访问的路由路径 - **进度条集成**: 使用VueUse的NProgress集成 **核心代码示例:** ```typescript // 路由守卫实现 router.beforeEach(async (to, from, next) => { const userStore = useUserStore(); // 白名单检查 if (ROUTER_WHITE_LIST.includes(to.path)) return next(); // Token验证 if (!userStore.token) userStore.logout(); next(); }); ``` ### 2. 🗃️ 状态管理 (`src/stores/`) **架构设计亮点:** - **模块化Store**: 按业务功能划分独立的store模块 - **持久化策略**: 集成pinia-plugin-persistedstate实现数据持久化 - **TypeScript集成**: 完整的类型定义和类型推断 **Store模块划分:** - `auth.ts` - 认证状态管理 - `chat.ts` - 聊天会话管理 - `design.ts` - 主题和布局配置 - `user.ts` - 用户信息管理 - `files.ts` - 文件上传管理 - `model.ts` - AI模型配置 ### 3. 🌐 API层 (`src/api/`) **技术创新点:** - **Hook-Fetch替代Axios**: 专门为流式请求设计的现代化HTTP客户端 - **SSE流式支持**: 内置Server-Sent Events解码插件 - **JWT自动管理**: 请求拦截器中自动处理Token认证 **API模块组织:** ```typescript // 统一的请求配置 export const request = hookFetch.create({ baseURL: import.meta.env.VITE_API_URL, plugins: [sseTextDecoderPlugin({ json: true, prefix: 'data:' })] }); // JWT认证插件 request.use(jwtPlugin()); ``` ### 4. 🧩 组件系统 (`src/components/`) **组件分类体系:** - **业务组件**: DeepThinking(深度思考)、FilesSelect(文件选择)、ModelSelect(模型选择) - **交互组件**: LoginDialog(登录弹窗)、Popover(弹出框) - **基础组件**: SvgIcon(图标)、WelecomeText(欢迎文本) **组件技术特色:** - **Composition API**: 全部使用Vue3的Composition API编写 - **TypeScript支持**: 完整的类型定义和Props验证 - **响应式设计**: 支持移动端和PC端的自适应布局 ## 🚀 核心特性实现 ### 1. 流式聊天交互 ```typescript // 使用Hook-Fetch处理SSE流式响应 export const request = hookFetch.create({ plugins: [sseTextDecoderPlugin({ json: true, prefix: 'data:' })], }); ``` ### 2. 响应式布局系统 - 支持PC端和移动端自适应 - 基于VueUse的屏幕尺寸监听 - 折叠侧边栏的阈值控制 ### 3. 主题系统 - 支持暗色/亮色主题切换 - CSS变量驱动的主题配置 - 动态主题颜色配置 ### 4. 权限管理系统 - 基于Token的身份验证 - 路由级别的访问控制 - 自动登录状态管理 ## 📦 安装与部署指南 ### 🛠️ 环境要求 - **Node.js**: >= 16.0.0 (推荐18.x LTS版本) - **包管理器**: pnpm >= 7.0.0 (推荐) 或 npm >= 8.0.0 - **操作系统**: Windows, macOS, Linux (支持所有主流系统) ### 📥 本地开发环境搭建 #### 1. 项目克隆与初始化 ```bash # 克隆项目 git clone https://github.com/element-plus-x/ruoyi-element-ai.git cd ruoyi-element-ai # 安装依赖 (推荐使用pnpm) pnpm install # 或者使用npm npm install ``` #### 2. 环境变量配置 ```bash # 复制环境变量模板 cp .env.development .env.local # 编辑.env.local文件，配置必要的环境变量 # VITE_API_URL=你的后端API地址 # VITE_WEB_TITLE=应用标题 ``` #### 3. 开发模式运行 ```bash # 启动开发服务器 pnpm run dev # 访问 http://localhost:5173 查看应用 ``` #### 4. 生产构建 ```bash # 构建生产版本 pnpm run build # 构建产物位于 dist/ 目录 ``` ### 🐳 Docker容器化部署 #### Dockerfile配置 ```dockerfile # 多阶段构建Dockerfile FROM node:18-alpine AS builder # 设置工作目录 WORKDIR /app # 复制package文件 COPY package.json pnpm-lock.yaml* ./ # 安装pnpm RUN npm install -g pnpm # 安装依赖 RUN pnpm install --frozen-lockfile # 复制源代码 COPY . . # 构建应用 RUN pnpm run build # 生产阶段 FROM nginx:alpine # 复制构建产物到nginx目录 COPY --from=builder /app/dist /usr/share/nginx/html # 复制nginx配置 COPY nginx.conf /etc/nginx/nginx.conf # 暴露端口 EXPOSE 80 # 启动nginx CMD ["nginx", "-g", "daemon off;"] ``` #### Docker Compose配置 ```yaml version: '3.8' services: ruoyi-element-ai: build: . ports: - '80:80' environment: - VITE_API_URL=http://your-api-server.com restart: unless-stopped networks: - app-network networks: app-network: driver: bridge ``` #### Nginx配置示例 ```nginx server { listen 80; server_name localhost; # 静态资源缓存 location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } # API代理 location /api/ { proxy_pass http://your-api-server.com; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 静态资源缓存配置 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } } ``` ### ☁️ 云平台部署 #### 1. Vercel部署 ```bash # 安装Vercel CLI npm i -g vercel # 在项目根目录执行 vercel --prod ``` #### 2. Netlify部署 - 连接GitHub仓库 - 构建命令: `pnpm run build` - 发布目录: `dist` #### 3. 传统服务器部署 ```bash # 服务器上拉取代码 git clone https://github.com/element-plus-x/ruoyi-element-ai.git cd ruoyi-element-ai # 安装依赖并构建 pnpm install pnpm run build # 配置nginx指向dist目录 ``` ### 🔧 部署配置详解 ```typescript // vite.config.mts 中的部署配置 export default defineConfig((cnf) => { const env = loadEnv(mode, process.cwd()); return { base: env.VITE_APP_ENV === 'production' ? '/' : '/', build: { // 构建优化配置 minify: 'esbuild', sourcemap: false, chunkSizeWarningLimit: 1600, rollupOptions: { output: { // 代码分割配置 chunkFileNames: 'assets/js/[name]-[hash].js', entryFileNames: 'assets/js/[name]-[hash].js', assetFileNames: 'assets/[ext]/[name]-[hash].[ext]' } } } }; }); ``` ## 🔄 开发工作流 ### 代码规范 ```bash # 代码质量检查 pnpm lint # 样式代码检查 pnpm lint:stylelint # 自动修复 pnpm fix ``` ### Git提交规范 ```bash # 使用规范化的提交信息 pnpm cz # 提交前自动执行代码检查 # 通过husky + lint-staged实现 ``` ## 🛠️ 核心配置文件说明 ### 1. Vite配置 (`vite.config.mts`) - 别名配置: `@` 指向 `src` 目录 - CSS预处理器配置 - 插件系统集成 ### 2. TypeScript配置 (`tsconfig.json`) - 严格的类型检查 - 路径映射配置 - 模块解析设置 ### 3. UnoCSS配置 (`uno.config.ts`) - 原子化CSS规则 - 预设配置 - 主题变量定义 ## 📊 性能优化策略 ### 1. 构建优化 - Vite的ES模块构建 - 代码分割和懒加载 - 资源压缩和优化 ### 2. 运行时优化 - 组件级别的代码分割 - 状态管理的持久化 - 内存泄漏防护 ### 3. 用户体验优化 - 加载状态管理 - 错误边界处理 - 离线功能支持 ## 🔗 相关链接与对比分析 ### 官方资源链接 - **前端仓库**: [GitHub](https://github.com/element-plus-x/ruoyi-element-ai) - **后端仓库**: [GitHub](https://github.com/ageerle/ruoyi-ai) - **在线演示**: [https://chat.element-plus-x.com](https://chat.element-plus-x.com) - **开发文档**: [https://chat-docs.element-plus-x.com](https://chat-docs.element-plus-x.com) ### 当前项目特色文档 - **技术栈分析教程**: 完整的技术架构和部署指南 - **技术栈更改要点**: 重大技术升级详细说明 - **项目对比分析**: 与官方仓库的差异对比 - **Docker部署指南**: 容器化部署完整方案 ### 对比分析要点 基于与官方仓库的对比，当前项目具有以下特色： - **文档体系完善**: 完整的技术文档和部署指南 - **部署方案优化**: 多环境支持和容器化部署 - **开发体验增强**: 针对本地环境的优化配置 - **稳定性保障**: 使用稳定的依赖版本 详细对比分析请参考 [项目对比分析.md](./项目对比分析.md) ## 🎯 项目总结与最佳实践 ### ✨ 项目核心特色 #### 🚀 技术先进性 - **前沿技术栈**: Vue3.5 + Vite6 + TypeScript5.8 的最新组合 - **现代化工具链**: 完整的ESLint9 + Stylelint16 + Husky开发规范 - **性能优化**: UnoCSS原子化样式 + Vite按需编译的极致性能 #### 🔄 重大技术升级亮点 1. **Hook-Fetch替代Axios**: 专门为AI流式交互设计的HTTP客户端 2. **UnoCSS原子化样式**: 告别传统CSS预处理器，实现按需生成 3. **Element Plus X增强**: 基于Element Plus的定制化组件库 4. **完整的TypeScript支持**: 从配置到代码的全链路类型安全 #### 🏗️ 架构设计优势 - **模块化架构**: 清晰的目录结构和组件组织 - **插件化设计**: Hook-Fetch的插件系统支持灵活扩展 - **响应式布局**: 支持PC端和移动端的自适应设计 - **主题系统**: 动态主题切换和CSS变量驱动 ### 💡 最佳实践建议 #### 1. 开发规范 ```bash # 使用规范化的提交流程 pnpm cz # 代码质量检查 pnpm lint # 样式代码检查 pnpm lint:stylelint ``` #### 2. 性能优化 - **构建优化**: 利用Vite的ES模块构建和代码分割 - **运行时优化**: 组件级别的懒加载和状态持久化 - **缓存策略**: 合理的静态资源缓存配置 #### 3. 部署策略 - **Docker容器化**: 使用多阶段构建优化镜像大小 - **CDN加速**: 静态资源使用CDN分发 - **环境隔离**: 开发、测试、生产环境严格分离 ### 🎯 适用场景 #### ✅ 推荐使用场景 - **企业级AI应用开发**: 需要快速构建AI聊天界面的项目 - **全栈AI项目**: 配合ruoyi-ai后端服务的完整解决方案 - **现代化前端项目**: 希望采用最新前端技术栈的团队 - **TypeScript项目**: 需要强类型支持的开发团队 #### ⚠️ 注意事项 - **后端依赖**: 需要配合ruoyi-ai后端服务使用 - **技术门槛**: 需要团队具备Vue3和TypeScript基础 - **浏览器兼容**: 主要支持现代浏览器(Chrome 90+, Firefox 88+) ### 🔮 感谢 # **ruoyi-element-ai****🎉AI应用开发模板** **Ruoyi-Element-AI** 作为一个现代化的企业级AI应用模板，不仅提供了完整的技术解决方案，更代表了前端技术发展的最新趋势。项目采用的技术栈和架构设计，为开发者提供了优秀的开发体验和卓越的性能表现，是构建AI聊天应用的理想选择。