ElementPlusX + RuoyiAI：Vue3 首個 AI 開發模板開源了！
在 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
