ElementPlusX + RuoyiAI：Vue3 首個(gè) AI 開(kāi)發(fā)模板開(kāi)源了！
前言
大家好，我是林三心，用最通俗易懂的話(huà)講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~
在 AI 技術(shù)日新月異的時(shí)代，打造專(zhuān)屬 AI 應(yīng)用成為開(kāi)發(fā)者的新目標(biāo)。然而，從零搭建 AI 開(kāi)發(fā)環(huán)境往往耗時(shí)耗力。為助力開(kāi)發(fā)者快速邁入 AI 開(kāi)發(fā)領(lǐng)域，基于 Vue3.5 的全棧 AI 開(kāi)發(fā)模板——ruoyi-element-ai 現(xiàn)已重磅開(kāi)源！
ruoyi-element-ai 項(xiàng)目簡(jiǎn)介
ruoyi-element-ai 是由 ElementPlusX 與 RuoyiAI 共同推出的企業(yè)級(jí) AI 應(yīng)用全棧開(kāi)發(fā)模板。
圖片
前端技術(shù)棧：基于 Vue3.5 和專(zhuān)為 AI 優(yōu)化的 Element-plus-x 組件庫(kù)，采用 Pinia 進(jìn)行狀態(tài)管理，通過(guò) Hook-fetch 處理 API 請(qǐng)求（尤其支持流式交互），并集成 TypeScript 和 ESLint 等工具，提供高效、規(guī)范的開(kāi)發(fā)體驗(yàn)。 后端支撐：無(wú)縫對(duì)接 RuoyiAI 項(xiàng)目，提供登錄注冊(cè)、會(huì)話(huà)管理、消息發(fā)送、模型切換等核心功能接口。它致力于為開(kāi)發(fā)者提供一套完整、高效的 AI 項(xiàng)目解決方案。
前沿技術(shù)棧，鑄就卓越開(kāi)發(fā)體驗(yàn)
前端優(yōu)勢(shì)：效率與規(guī)范并重
- 尖端技術(shù)組合：Vue3.5（響應(yīng)式核心框架，性能與體驗(yàn)俱佳） + Vite6（極速構(gòu)建工具，熱更新快如閃電） + TypeScript（靜態(tài)類(lèi)型檢查，提升代碼健壯性） + Pinia3（輕量高效狀態(tài)管理庫(kù)） + Hook-fetch（流式 API 請(qǐng)求處理，完美解決 Axios 局限）。這套組合拳顯著提升開(kāi)發(fā)效率與應(yīng)用性能。
- 嚴(yán)格開(kāi)發(fā)規(guī)范：集成 ESLint/Stylelint 進(jìn)行代碼/樣式靜態(tài)檢查，配合 husky/commitlint 強(qiáng)制 Git 工作流規(guī)范，確保團(tuán)隊(duì)協(xié)作一致性。
- 開(kāi)箱即用特性：內(nèi)置動(dòng)態(tài)路由權(quán)限系統(tǒng)、模塊化 Pinia 狀態(tài)管理，提供豐富組件與 hooks，大幅降低開(kāi)發(fā)門(mén)檻，助力中后臺(tái)系統(tǒng)及智能交互場(chǎng)景快速落地。
后端能力：強(qiáng)大且靈活
RuoyiAI 提供堅(jiān)實(shí)后端支持：
- 全棧開(kāi)源系統(tǒng)：提供完整的前端應(yīng)用、后臺(tái)管理、小程序應(yīng)用（MIT 協(xié)議），開(kāi)箱即用，代碼可自由修改分發(fā)。
- 本地化 RAG 方案：集成 Milvus/Weaviate 向量庫(kù)、本地向量化模型及 Ollama 調(diào)用本地 LLM，實(shí)現(xiàn)高效、私密的本地檢索與生成。
- MCP 協(xié)議賦能：開(kāi)發(fā)者按 MCP 標(biāo)準(zhǔn)開(kāi)發(fā)一次工具接口，即可被所有兼容 MCP 協(xié)議的模型或平臺(tái)（如 MCP 廣場(chǎng)的 1400+ mcpserver）復(fù)用，極大減少開(kāi)發(fā)維護(hù)成本。
Element-plus-x：專(zhuān)為 AI 優(yōu)化的組件利器
圖片
基于 Element Plus 深度優(yōu)化：
- 傳承與創(chuàng)新：汲取精華并創(chuàng)新，無(wú)需 JSX 語(yǔ)法，提供熟悉且驚艷的組件體驗(yàn)。
- 性能與定制：代碼結(jié)構(gòu)優(yōu)化保障高性能，同時(shí)支持深度自定義，適配復(fù)雜業(yè)務(wù)需求。
- 沉浸交互體驗(yàn)：集成打字機(jī)霧化動(dòng)畫(huà)、智能滾動(dòng)、加載狀態(tài)等細(xì)節(jié)，提升應(yīng)用交互生動(dòng)性與吸引力。
- 豐富 AI 組件：
聊天對(duì)話(huà)組件：展示對(duì)話(huà)，支持頭像、頭部、內(nèi)容、底部自定義，具備打字效果、加載狀態(tài)及多種滾動(dòng)控制。
**文件卡片組件 (FilesCard)**：可視化呈現(xiàn)多種文件類(lèi)型（圖片/文檔/壓縮包等），展示圖標(biāo)、名稱(chēng)、描述、狀態(tài)。
**附件上傳組件 (Attachments)**：支持文件列表展示、上傳、拖拽、滾動(dòng)瀏覽，適用于表單附件、文件管理等場(chǎng)景。
圖片
快速上手指南
- 克隆項(xiàng)目：
- 國(guó)內(nèi)推薦 Gitee：git clone https://gitee.com/he-jiayue/ruoyi-element-ai.git
- 國(guó)際可用 GitHub：git clone https://github.com/element-plus-x/ruoyi-element-ai.git
- 進(jìn)入目錄：cd ruoyi-element-ai
- 安裝依賴(lài)：推薦使用 pnpm (v8+)：pnpm install (速度更快，依賴(lài)管理更優(yōu))
- 啟動(dòng)開(kāi)發(fā)服務(wù)器：pnpm dev，訪(fǎng)問(wèn) http://localhost:8080
- 構(gòu)建生產(chǎn)代碼：pnpm build，輸出至 dist/ 目錄
資源直達(dá)
- 前端源碼：https://gitee.com/he-jiayue/ruoyi-element-ai
- 后端源碼：https://gitee.com/ageerle/ruoyi-ai
- 開(kāi)發(fā)文檔：ruoyi-element-ai | 企業(yè)級(jí) AI 應(yīng)用全棧開(kāi)發(fā)模板
- 在線(xiàn)預(yù)覽：chat-template
開(kāi)啟 AI 開(kāi)發(fā)新篇章
ruoyi-element-ai 作為 Vue3 生態(tài)的首個(gè) AI 開(kāi)發(fā)模板，依托先進(jìn)的技術(shù)棧、規(guī)范的流程與強(qiáng)大的功能，為開(kāi)發(fā)者提供了高效的 AI 應(yīng)用構(gòu)建平臺(tái)。無(wú)論是個(gè)人開(kāi)發(fā)者快速驗(yàn)證創(chuàng)意，還是企業(yè)團(tuán)隊(duì)加速項(xiàng)目落地，此模板都是您的理想起點(diǎn)。立即體驗(yàn)，開(kāi)啟您的 AI 開(kāi)發(fā)之旅！
