RuoYi Vue Plus — vben5 と Ant Design Vue を使ったフロントエンドテンプレート

概要

このリポジトリ「ruoyi-plus-vben5」は、vben（vue-vben-admin）最新の v5 系と Ant Design Vue を核にした RuoYi-Vue-Plus フロントエンドプロジェクトです。vben5 の分倉（モノレポ）構成を受け継ぎ、実際のアプリ開発は root/apps/web-antd 配下で行われる設計になっています。README によれば主要コンポーネントのバージョンは vben 5.5.9、ant-design-vue 4.2.6 を使用。プロジェクトは RuoYi のバックエンド（分布式/微服务の特定バージョン）と合わせて運用することを想定しており、オフラインアイコン対応（v1.1.0）やワークフロー統合（v1.2.0、warmflow）など実務で役立つ拡張も含んでいます。管理画面構築の初期実装やカスタマイズの土台として有益です。

リポジトリの統計情報

スター数: 28
フォーク数: 3
ウォッチャー数: 28
コミット数: 30
ファイル数: 35
メインの言語: Vue

主な特徴

vben v5 をベースに Ant Design Vue を組み合わせた管理画面テンプレート
モノレポ（分倉）構成を採用し、ルート開発パスは apps/web-antd
オフラインアイコン対応、ワークフロー（warmflow）連携の拡張を実装
RuoYi の分布式/微服务バックエンド特定バージョンと互換性あり

技術的なポイント

本プロジェクトは vben5 の設計思想に沿ったフロントエンド実装を提供しています。vben5 は Vue のモダンな機能群（Composition API や型安全な設計）を活かしつつ、管理画面に必要なルーティング生成、権限管理、レイアウト切替、ダイナミックメニューなどを抽象化したフレームワークです。本リポジトリはその v5 をフォーク／採用し、Ant Design Vue を UI コンポーネントとして統合することで、視覚的に整った管理画面を短期間で立ち上げられる構成となっています。

v5 系では「分倉（パッケージ）ディレクトリ構造」を採用しており、モノレポ形式で複数のアプリ／パッケージを管理できます。README が指す通り開発用パスは root/apps/web-antd にあり、他パッケージと切り分けて開発・ビルドを行うことで依存関係の管理や再利用性が向上します。これにより UI、コンポーネント、ユーティリティを別パッケージ化し、チーム開発やマイクロフロントエンド的な運用にも対応しやすくなります。

機能拡張として v1.1.0 で「オフラインアイコン」をサポートしている点は特徴的です。通常、管理画面では多数のアイコンを利用しますが、外部 CDN へ依存せずローカルにアイコンセットを保持することで、ネットワーク制約下でも安定して表示できるメリットがあります。v1.2.0 の warmflow ワークフロー連携は業務プロセスの自動化や承認フローをフロントから扱う際に直接的に役立つ拡張で、RuoYi バックエンドのワークフロー実装と組み合わせて運用できます。

また README にある対象バックエンド（分布式5.5.1 / 微服务2.5.1）への互換性表記は、API インタフェースの仕様を合わせた設計が行われていることを示唆します。実際の導入では API スキーマや認証方式（JWT や Session 等）の整合を確認する必要がありますが、テンプレート側でエンドポイント設計や権限ルールのサンプルが整っていれば、そのままバックエンドに接続して動作検証を進められます。

総じて、本リポジトリは vben5 のモダンな開発体験と Ant Design の豊富な UI を組み合わせ、RuoYi 系バックエンドとの親和性を意識した実務向けテンプレートを目指している点が技術的な肝です。開発者は apps/web-antd 配下の構成を理解し、アイコン管理やワークフロー連携など用意されている拡張を活用してカスタマイズを進めると良いでしょう。

プロジェクトの構成

主要なファイルとディレクトリ：

.browserslistrc: file
.changeset: dir
.commitlintrc.js: file
.dockerignore: file
.editorconfig: file

…他 30 ファイル

まとめ

vben5 と Ant Design Vue を組み合わせ、RuoYi の実務要件に合わせた拡張を備えたフロントエンドテンプレートです。

リポジトリ情報：

名前: ruoyi-plus-vben5
説明: 基于vben最新版本v5 & ant-design-vue 的 RuoYi-Vue-Plus 前端项目
スター数: 28
言語: Vue
URL: https://github.com/imdap/ruoyi-plus-vben5
オーナー: imdap
アバター: https://avatars.githubusercontent.com/u/28396334?v=4

READMEの抜粋：

置顶说明

傻逼GITEE在没有任何通知/说明的情况将仓库设置为私有你以为我会去问你原因?? 直接不用你了好吧

提示

该仓库使用vben最新版本v5开发

v5版本采用分仓(包)目录结构, 具体开发路径为: 根目录/apps/web-antd

目前对应后端版本: 分布式5.5.1/微服务2.5.1

V1.1.0版本已支持离线图标

V1.2.0版本对接warmflow工作流

简介

基于 vben5 & ant-design-vue 的 RuoYi-Vue-Plus 前端项目

组件/框架	版本
vben	5.5.9
ant-design-vue	4.2.6