在 AI 技術飛速發展的今天，開發一款自己的 AI 應用成為了許多開發者的追求。

然而，從零開始搭建一個完整的 AI 開發環境，往往需要耗費大量的時間和精力。

為了幫助開發者快速進入 AI 開發領域，一個基于 Vue3.5 的全新 AI 開發模板——ruoyi-element-ai 正式開源了！

ruoyi-element-ai 簡介

ruoyi-element-ai 是由 ElementPlusX 和 RuoyiAI 聯合打造的企業級 AI 應用全棧開發模板。

它基于 Vue3.5 和 Element-plus-x 組件庫，采用 Pinia 進行狀態管理，Hook-fetch 處理 API 請求，并結合 TypeScript 和 ESLint 等工具，提供了高效、規范的開發體驗。

后端則使用 RuoyiAI 項目進行接口對接，支持登錄、注冊、會話管理、消息發送和模型切換等功能，旨在為開發者提供一個完整、高效的 AI 項目解決方案。

優勢特性

前端優勢：

• 最新技術棧：采用 Vue3.5 響應式核心和 Vite6 極速構建，搭配 TypeScript5.8 強類型系統，結合 Pinia3 輕量狀態管理與 Hook-fetch 流式數據交互，提升開發效率與應用性能。
• 規范開發：通過 ESLint/Stylelint 實現代碼 / 樣式全文件靜態校驗，結合 `husky/commitlint 強制規范化 Git 工作流，統一團隊協作規范。
• 開箱即用：內置動態路由權限系統、Pinia 模塊化狀態管理，提供好用的組件和 hooks，降低開發門檻，助力快速落地中后臺系統與智能交互場景。

技術棧詳解

(1) 前端部分

• Vue3.5：用于構建用戶界面的漸進式框架，提供出色的性能和開發體驗。
• Element-plus-x：基于 Element Plus 的組件庫，專為 AI 項目優化，方便快速搭建美觀的界面。
• Pinia：輕量級的狀態管理庫，幫助開發者更好地管理應用中的數據。
• Hook-fetch：用于處理 API 請求，支持流模式，提升數據交互的效率和靈活性。
• TypeScript：添加了靜態類型檢查的編程語言，有助于提高代碼質量和可維護性。
• ESLint9：代碼質量檢測工具，幫助開發者編寫規范、整潔的代碼。

(2) 后端部分

RuoyiAI：提供后端接口服務，支持用戶認證、會話管理、模型調用等功能，為前端應用提供強大的后端支持。

如何快速上手

(1) 克隆項目

國內用戶推薦使用 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

(2) 安裝依賴

推薦使用 pnpm 包管理器（v8+），相比 npm/yarn 具有更快的安裝速度和更優的依賴管理。

pnpm install

(3) 啟動開發服務器

pnpm dev

訪問地址：http://localhost:8080。

(4) 構建生產環境代碼

pnpm build

生成的代碼將輸出到 dist/ 目錄。

ruoyi-element-ai 作為 Vue3 首個 AI 開發模板，以其先進的技術棧、規范的開發流程和強大的功能特性，為開發者提供了一個高效的 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