ElementPlusX × RuoyiAI 联合发布 《仿豆包AI全栈模版》

「Element Plus X」×「RuoyiAI」

联合发布：🥰「仿豆包通义 AI 全栈模版」🥰

❝

🙊大家好，我是嘉悦，好久没见「ElementPlusX 组件库项目」开源一段时间了，对 ant-design-x 组件的复刻，也暂时告一段落

最近我们也是在和 RuoyiAI 后台项目对接，打磨了挺长时间。为大家推出了一款超给力的《仿豆包通义 AI 全栈模版》「ruoyi-element-ai 模版项目」，希望能为开发者献上了一套「完整、高效」的全栈 AI 解决方案。助力「企业级 AI」 项目快速开发 🚀

❞

💩在体验对比多家 AI 对话产品，我们觉得豆包、通义的样式和交互，真的做的不错。所以我们希望将模版项目，也做到尽可能的还原。

😁提前声明：项目是 「MIT 开源协议」，支持免费二开商用，大家可以放心使用呢

这是项目的截图简介

可以看到在第一版本的模版项目中，我们基于 element-plus-x 的组件进行开发的模版项目，后端接口使用的是 ruoyi-ai 项目。并实现了登录、邮箱注册、会话管理，发送消息，切换模型，上传附件等基础功能联调，兼容了思考模型。目前的整体的布局是仿豆包的，有一些细节的交互展示，我们是仿通义等其他我们认为较为优质交互样式的产品。

我们也为这个模版项目配套了一个简单的开发文档，后续会持续维护这个开发文档

❝

💩下面大致给大家过一下具体使用的技术栈和预览相关的介绍。

✨【另外】文档下方会整理好相关文档，预览的访问链接，方便大家看完后跳转访问✨

❞

💖简单的给大家介绍一下这个模版项目

🚀 硬核技术栈，规范开发

这个模版集结了当下最前沿的技术栈，性能、效率、规范全在线：

• 「Vue3.5」：最新版本，带来极致性能和开发体验。
• 「Element-plus-x」：基于 Element Plus 的 AI 组件库，专为企业级 AI 项目优化。
• 「Pinia」：状态管理，轻量又强大。
• 「Hook-fetch」：优雅处理 API 请求（完美解决 # axios 不支持流模式的问题同时采用最优雅的插件的形式，对请求进行封装，简直不要太优雅🙊）。
• 「Unocss」：原子 CSS 框架，样式编写快到飞起。
• 「Sass」：CSS 预处理器，灵活又高效。
• 「Eslint9」：最新代码检测工具，保持代码整洁如新。
• 「cz-git」：提交代码规范，多人开发更方便语义化提交代码。
• 「typescript」：ts 强类型校验，让代码健壮、可维护性更高。

整个项目不会有过重的封装，代码逻辑清晰。

更多交互细节快点击下方链接访问

💝 项目地址，快速链接体验

😍 快速预览，了解模版

预览页面在未登录时候，也可以进行模型切换和对话。

这些模型都是在若依后台项目配置的，开发者或者用户，可以在后台，自定义配置大模型名称和 apikey，甚至可以自己定义你的模型产品的定价等。

第二个模型模型是支持思考的，用户可以尝试二号模型，让 AI 进入思考再回复。

我们在项目中默认走的是邮箱注册和账号密码登录，同时预留了扫码登录逻辑。其他的大家可以自己进行拓展二开

登录后，就可以看见当前账号下的会话记录。点击会话后，可以看到对应的消息列表。同时还支持对你的会话进行重命名和删除。

❝

「✨star ✨star 🙈」 在开源第一版本后，我们将回到对 「md 渲染」，「编辑输入框组件」的深入研究和开发中，并对 Element-Plus-X 的 「issue」 进行清理。

🥰开源不易，如果你对这个项目感兴趣，或者觉得也不错，欢迎 GitHub Star、Fork 这些项目

💌后面我们会持续维护更新这个模版项目，有想法的朋友欢迎提交 Issue 和 PR，和我们一起把它变得更强！💪

「从今天起，用《ElementPlusX × RuoyiAI》开启你的 AI 开发之旅吧！」

AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding