在 AI 技術(shù)飛速發(fā)展的今天，開發(fā)一款自己的 AI 應(yīng)用成為了許多開發(fā)者的追求。

然而，從零開始搭建一個(gè)完整的 AI 開發(fā)環(huán)境，往往需要耗費(fèi)大量的時(shí)間和精力。

為了幫助開發(fā)者快速進(jìn)入 AI 開發(fā)領(lǐng)域，一個(gè)基于 Vue3.5 的全新 AI 開發(fā)模板——ruoyi-element-ai 正式開源了！

ruoyi-element-ai 簡介

ruoyi-element-ai 是由 ElementPlusX 和 RuoyiAI 聯(lián)合打造的企業(yè)級 AI 應(yīng)用全棧開發(fā)模板。

它基于 Vue3.5 和 Element-plus-x 組件庫，采用 Pinia 進(jìn)行狀態(tài)管理，Hook-fetch 處理 API 請求，并結(jié)合 TypeScript 和 ESLint 等工具，提供了高效、規(guī)范的開發(fā)體驗(yàn)。

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

優(yōu)勢特性

前端優(yōu)勢：

• 最新技術(shù)棧：采用 Vue3.5 響應(yīng)式核心和 Vite6 極速構(gòu)建，搭配 TypeScript5.8 強(qiáng)類型系統(tǒng)，結(jié)合 Pinia3 輕量狀態(tài)管理與 Hook-fetch 流式數(shù)據(jù)交互，提升開發(fā)效率與應(yīng)用性能。
• 規(guī)范開發(fā)：通過 ESLint/Stylelint 實(shí)現(xiàn)代碼 / 樣式全文件靜態(tài)校驗(yàn)，結(jié)合 `husky/commitlint 強(qiáng)制規(guī)范化 Git 工作流，統(tǒng)一團(tuán)隊(duì)協(xié)作規(guī)范。
• 開箱即用：內(nèi)置動(dòng)態(tài)路由權(quán)限系統(tǒng)、Pinia 模塊化狀態(tài)管理，提供好用的組件和 hooks，降低開發(fā)門檻，助力快速落地中后臺(tái)系統(tǒng)與智能交互場景。

技術(shù)棧詳解

(1) 前端部分

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

(2) 后端部分

RuoyiAI：提供后端接口服務(wù)，支持用戶認(rèn)證、會(huì)話管理、模型調(diào)用等功能，為前端應(yīng)用提供強(qiáng)大的后端支持。

如何快速上手

(1) 克隆項(xiàng)目

國內(nèi)用戶推薦使用 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 具有更快的安裝速度和更優(yōu)的依賴管理。

pnpm install

(3) 啟動(dòng)開發(fā)服務(wù)器

pnpm dev

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

(4) 構(gòu)建生產(chǎn)環(huán)境代碼

pnpm build

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

ruoyi-element-ai 作為 Vue3 首個(gè) AI 開發(fā)模板，以其先進(jìn)的技術(shù)棧、規(guī)范的開發(fā)流程和強(qiáng)大的功能特性，為開發(fā)者提供了一個(gè)高效的 AI 應(yīng)用開發(fā)平臺(tái)。

無論是個(gè)人開發(fā)者還是企業(yè)團(tuán)隊(duì)，都可以借助這個(gè)模板快速搭建自己的 AI 應(yīng)用，加速項(xiàng)目落地。

• 前端代碼地址：https://gitee.com/he-jiayue/ruoyi-element-ai
• 后端代碼地址：https://gitee.com/ageerle/ruoyi-ai
• 開發(fā)文檔：https://chat-docs.element-plus-x.com/
• 在線預(yù)覽：https://chat.element-plus-x.com/chat