3 步跑通 RuoYi AI 前端Vben Admin 与 Naive UI 实战【免费下载链接】ruoyi-aiEnterprise-grade AI agent framework with multi-provider LLM management, secure knowledge bases and high-precision RAG, visual workflow orchestration, and multi-agent coordination.项目地址: https://gitcode.com/GitHub_Trending/ru/ruoyi-aiRuoYi AI 前端基于 Vben Admin 与 Naive UI 搭建跑在 Node.js 20 和 pnpm 工具链上。RuoYi AI 本身是一个 Java 17 SpringBoot 3.X 的 AI 聊天与绘画平台后端管模型和会话前端要解决的是三端界面管理后台、用户端网页、小程序。读完这篇你知道它为什么选这套组合、三个前端模块怎么分工以及本地 3 条命令就能把开发环境拉起来。为什么是这套组合Vben Admin 与 Naive UI 各解决什么痛点中后台项目最先耗时的不是业务是样板登录页、权限路由、表格加表单的 CRUD、主题切换。Vben Admin 把这类高频页面做成了现成模板Vue 3 Vite TypeScript权限方案和主题配置都封装好了接自己的业务字段就能用。它的短板在视觉层只提供骨架界面观感要靠组件库兜底。Naive UI 补的正是这一环——所有组件带完整 TS 类型定义深色模式一个主题配置就能切不用单独维护一套样式。一句话Vben Admin 管结构与权限的重复劳动Naive UI 管界面观感与交互两边不重复造轮子。RuoYi AI 三个前端模块ruoyi-admin、ruoyi-web、ruoyi-uniapp前端按谁在用拆成三块互不共享代码共用同一套后端接口ruoyi-admin管理端基于 Vben Admin 构建给运营和管理员用管模型、用户、订单仓库内见 ruoyi-admin/。ruoyi-web用户端终端用户进来聊天、生图的网页入口。ruoyi-uniapp小程序端跨平台方案复用同样的后端能力。工具链与多端适配Node 20 和 pnpm 管住了什么开发基线是 Node.js 20依赖统一交给 pnpm。它对 lock 文件和多模块项目的安装速度比 npm 更稳团队里不会出现各装各版本的依赖漂移。本地开发参数在 application-dev.yml 里集中调整。浏览器基线定死为 Chrome 90、Firefox 88、Safari 14。这不是越新越好而是构建配置里要按这个基线设定能用的 ES 特性和 CSS 能力低于这个版本的浏览器直接不支持。布局上 PC 和移动端走同一套响应式代码小程序端由 ruoyi-uniapp 单独实现视觉风格三端统一。RuoYi AI 前端国际化怎么做3 个 properties 文件加一处切换i18n 直接建立在 Vben Admin 自带的国际化能力上文案抽离成资源文件管理。后端词条放在 ruoyi-admin/src/main/resources/i18n/共 3 个文件messages.properties 作默认值messages_zh_CN.properties 和 messages_en_US.properties 分别对应中英文运行时切换 locale 即可。前端走同一思路新增一种语言就是加一个资源文件不用动业务代码。三个真正起作用的性能优化按需加载、缓存、图片压缩代码分割路由按需加载首屏只拉当前页的 chunk不为整个后台买单。缓存策略静态资源和接口响应分级设置过期与校验规则二次访问基本走缓存。图片优化统一转 WebP 交付首屏之外的图片懒加载弱网和移动端省的是实打实的流量。每一项对应可观测的指标首屏时间、二次访问加载时间、首屏图片体积。3 条命令跑通 RuoYi AI 前端本地环境环境准备Node.js 20pnpm浏览器Chrome 90 / Firefox 88 / Safari 14git clone https://gitcode.com/GitHub_Trending/ru/ruoyi-ai pnpm install pnpm dev执行完开发服务器即启动管理端和用户端都能在浏览器里直接访问。读完能落地的两件事新做中后台项目时先拿 Vben Admin 的模板对一下你的权限和表格表单需求缺口再自己写。选组件库前优先确认深色主题和 TS 类型是否完整这两项最省后期返工 【免费下载链接】ruoyi-aiEnterprise-grade AI agent framework with multi-provider LLM management, secure knowledge bases and high-precision RAG, visual workflow orchestration, and multi-agent coordination.项目地址: https://gitcode.com/GitHub_Trending/ru/ruoyi-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考