ElementPlusX + RuoyiAI：Vue3 首个 AI 开发模板开源

ruoyi-element-ai 简介

ruoyi-element-ai 是基于 Vue3.5 + Element-Plus-X + hook-fetch + TypeScript + Eslint9 开发的企业级AI应用模板，搭配 ruoyi-ai 后端，快速构建仿豆包/通义的全栈AI项目。

它基于 Vue3.5 和 Element-plus-x 组件库，采用 Pinia 进行状态管理，Hook-fetch 处理 API 请求，并结合 TypeScript 和 ESLint 等工具，提供了高效、规范的开发体验。

后端则使用 RuoyiAI 项目进行接口对接，支持登录、注册、会话管理、消息发送和模型切换等功能，旨在为开发者提供一个完整、高效的 AI 项目解决方案。

核心功能

• 使用 Vue3.5+ 各种新特性的支持，让开发更有效率

• 采用 Vite6.3+ 作为项目开发、打包工具

• 使用 Pinia3.0+ 作为全局状态管理库，轻量、优雅、易用，集成 Pinia 持久化插件

• 使用 TypeScript5.8+ 增强项目的代码规范和可读性

• 使用 Unocss 预设样式，更快书写简单的样式

• 弃用 Axios (不支持流式请求) 改用 Hook-Fetch (支持流模式，插件化封装，写法极度优雅) 进行全局的请求封装

• 使用 VueRouter 配置动态路由权限拦截、路由懒加载

• 使用 KeepAlive 对页面进行缓存

• 封装了一些好用的组件和Hooks，增强用户交互体验

• 使用 ESLint9+、Stylelint16+ 代码校验规范、同时统一保存格式化代码

• 使用 husky、lint-staged、commitlint、cz-git 规范提交信息

安装与运行

# 克隆项目
# Gitee
git clone https://gitee.com/he-jiayue/ruoyi-element-ai.git
# GitHub
git clone https://github.com/element-plus-x/ruoyi-element-ai.git
cd ruoyi-element-ai

# 安装依赖（推荐pnpm 避免幻影依赖）
pnpm install

# 开发模式
pnpm run dev

# 生产构建
pnpm build

# 代码校验
pnpm lint          # ESLint检测
pnpm lint:stylelint # 样式格式化
pnpm cz            # 规范提交（自动执行lint）

前端部分

• Vue3.5：用于构建用户界面的渐进式框架，提供出色的性能和开发体验。

• Element-plus-x：基于 Element Plus 的组件库，专为 AI 项目优化，方便快速搭建美观的界面。

• Pinia：轻量级的状态管理库，帮助开发者更好地管理应用中的数据。

• Hook-fetch：用于处理 API 请求，支持流模式，提升数据交互的效率和灵活性。

• TypeScript：添加了静态类型检查的编程语言，有助于提高代码质量和可维护性。

• ESLint9：代码质量检测工具，帮助开发者编写规范、整洁的代码。

后端部分

• RuoyiAI：提供后端接口服务，支持用户认证、会话管理、模型调用等功能，为前端应用提供强大的后端支持。

如何快速上手

克隆项目

• 国内用户推荐使用 Gitee 仓库：

git clone https://gitee.com/he-jiayue/ruoyi-element-ai.git
cd ruoyi-element-ai

• 国际用户可以使用 GitHub 仓库：

git clone https://github.com/element-plus-x/ruoyi-element-ai.git
cd ruoyi-element-ai

安装依赖

推荐使用 pnpm 包管理器（v8+），相比 npm/yarn 具有更快的安装速度和更优的依赖管理。

pnpm install

启动开发服务器

pnpm dev

用户界面：http://your-server-ip:8081

管理员界面：http://your-server-ip:8082

构建生产环境代码

pnpm build

生成的代码将输出到 dist/ 目录。

ruoyi-element-ai 作为 Vue3 首个 AI 开发模板，以其先进的技术栈、规范的开发流程和强大的功能特性，为开发者提供了一个高效的 AI 应用开发平台。

• 前端代码地址：https://gitee.com/he-jiayue/ruoyi-element-ai

• 后端代码地址：https://gitee.com/ageerle/ruoyi-ai

• 开发文档：https://chat-docs.element-plus-x.com/

• 在线预览：https://chat.element-plus-x.com/chat