バックエンド管理システムをゼロから構築するのは簡単ではありません。数あるオープンソースの管理バックエンドの中でも、Vue3は高い評価を得ています。Vue3は、効率性、柔軟性、そして使いやすさで知られる最新のフロントエンドフレームワークです。本日は、エンタープライズレベルのバックエンド製品のプロトタイプを迅速に構築するのに役立つ、無料かつオープンソースのVue3管理バックエンドをいくつかご紹介します。

1. Vue vben 管理者:

これは、Vue 3.0、Vite、Ant-Design-Vue、および TypeScript をベースにしたバックエンド ソリューションであり、中規模から大規模プロジェクトの開発にすぐに使用できるソリューションを提供することを目的としています。

このプロジェクトをマスターするには、ある程度のフロントエンド開発の知識と、よくある問題に対処するためのVueの基礎知識が必要です。プロジェクトを理解する上で非常に役立つため、事前に以下の内容を学習することをお勧めします。

プロジェクトの特徴:

最新の技術スタック： Vue3、Vite、TypeScript などの最新の技術スタックに基づいて開発されています。

軽量で高速なホット リロード:アプリケーションのサイズに関係なく、非常に高速なモジュール ホット リロード (HMR)。

豊富な例:一般的な Web ベースのプラグインの実装例。

コンポーネントのカプセル化:基本的な作業要件を満たすために、日常業務で頻繁に使用されるコンポーネントの二次カプセル化。

テーマ設定:豊富なテーマ設定オプションとダーク テーマの適応。

• ダークテーマについて：プロジェクトにはダークテーマスイッチが組み込まれています。プロジェクトで使用するために必要なカラー変数を設定するだけで済みます。
• 原理： vite-plugin-themeプラグインは、すべてのカラー変数を個別のCSSファイルに抽出し、HTML内のそれらすべてにCSSセレクターを追加します。ダークテーマは、HTMLタグのdata-theme属性を変更することで切り替えられます。

アクセス制御:包括的なフロントエンドおよびバックエンドのアクセス制御ソリューション

注:ローカル開発環境では、Chrome の最新バージョンを推奨します。バージョン 80 より前の Chrome はサポートされていません。本番環境では、最新のブラウザはサポートされていますが、Internet Explorer はサポートされていません。

2. ナイーブUI管理者

Vue3、Vite2、TypeScript をベースに、Naive UI コンポーネント ライブラリを使用して、すぐに使用できるミッドエンドからバックエンドまでのフロントエンド ソリューションが形成されます。

Naive UI Adminは、Naive UIコンポーネントの設計および開発規約に準拠し、一貫したスタイルを維持しています。最新のフロントエンド技術スタックを活用し、典型的なビジネスモデルとページを抽出します。これには、カプセル化されたセカンダリコンポーネント、動的メニュー、権限検証、パーティクルベースの権限制御などの機能が含まれます。エンタープライズレベルのミドルエンドおよびバックエンドプロジェクトを迅速に構築するのに役立ちます。

その特徴:

• すぐに使用できるバックエンド フレームワークで、記述するコードが少なくなります。
• すぐに使用できるエンタープライズ グレードのフロントエンドおよびバックエンド製品が提供され、ビジネス アプリケーションを直接開発する時間を大幅に節約できます。

• マルチエコシステムのサポート:エンタープライズ製品にマルチ UI エコシステムのサポートを提供し、新規プロジェクトと既存プロジェクトの両方、またはリファクタリングに最適な開発コストで迅速な展開を可能にします。
• フレームワークレベル、ビジネスレベル、ページのスケーラビリティ/構成に至るまで、すぐに使用できる状態になっており、初心者でも簡単に始めることができます。
• 実用的なテンプレート: 多数のシステムやビジネス シナリオから非常に実用的で汎用的なページ デザインを抽出し、標準化された美しいシステムを簡単に構築できます。

よくある質問:

• ページ構文がスクリプト設定である場合は、その上に export default { name: 'pageName' } を追加する必要があります。
• そうでない場合は、defineComponent で名前を定義するだけです。
• vite-plugin-vue-setup-extend プラグインを使用できます。

注:現在のフレームワークは第2階層までのメニューのみをサポートしており、第2階層より上のメニューはサポートしていません。Plusバージョンでは既にサポートされています。

3. SCUI管理者

多くの複雑なビジネス コンポーネントとページ テンプレートを備えた強力な管理フレームワークであり、その専門性は有料製品に匹敵します。

Vue3とElementPlusをベースとしたSCUI Adminは、エンタープライズレベルのミドルウェア、バックエンド、フロントエンドタスクを迅速に構築できるよう、独自のコンポーネントと豊富なビジネステンプレートを継続的に提供しています。無料かつオープンソースであるだけでなく、多数の既製のビジネスコンポーネントとページテンプレートも提供しています。

プロジェクトの特徴:

• シンプルさが鍵です。Vue コンポーネントベースの開発では、最小限のコードと時間でビジネスに集中できます。
• 使いやすさ: ユーザー エクスペリエンスを最優先に考え、超高可用性と視覚情報のバランスを実現しました。
• 高性能: フロントエンドのコンピューティング能力の向上、帯域幅要求の削減、コード実行の改善のために複数の最適化が行われており、これらの最適化は継続中です。

ビルドとデプロイ:

• プロジェクトが完了すると、アプリケーションを 1 つのコマンドでパッケージ化できます。
• パッケージ化プロセスが完了すると、ルートディレクトリに「dist」フォルダが生成されます。このフォルダには、パッケージ化およびビルドされたファイルが含まれます。このフォルダを展開チームに送信できます。

フレームワークコア:

4. vue-pure-admin

vue-pure-admin は、無料のオープンソースのミドルウェアおよびバックエンドテンプレートです。最新の Vue 3、Vite2、Element-Plus、TypeScript などの主要テクノロジーを使用して開発されており、すぐに使えるミドルウェアおよびバックエンドのフロントエンドソリューションを提供します。学習やリファレンスとしてもご利用いただけます。

💡 最新のテクノロジースタックを採用しながら安定性を維持します。

Vue3、Vite、Element-Plus、TypeScript、Pinia、TailwindCSS などの最新のテクノロジー スタックを使用して開発されました。

⚡️ 軽量、高速、高温、高耐久性のパッケージ最適化ソリューション。

アプリケーションのサイズに関係なく、包括的な組み込みパッケージ最適化スキームにより、一貫して高速なホット モジュール リロード (HMR) を実現します。

🤙 豊富なコンポーネント、ツール、関数が組み込まれているため、簡単に使用できます。

単一ファイルのコンポーネント構文を使用して、すぐに使用できる豊富なコンポーネントとツール ライブラリを提供します。

🔩 高度に設定可能なテーマと 3 つのメニュー レイアウト。

高度に設定可能なテーマとダーク テーマの互換性を備え、左側、上部、組み合わせの 3 つのメニュー レイアウト モードを提供します。

5. 管理業務プロ

Admin Work Xは、Vue3、Webpack、TypeScript、ElementPlusで構築された、美しくパワフルで包括的なバックエンドフレームワークです。包括的なシステム構成、高品質なテンプレート、よく使われるコンポーネントを備え、真にワンストップですぐに使えるソリューションです。

プロジェクトの特徴:

• 最新のテクノロジー スタック: Vue3、Vite、TypeScript、NaiveUI、Vuex などの最新のテクノロジー スタックに基づいて開発されています。
• 軽量で高速なホット リロード: アプリケーションのサイズに関係なく、非常に高速なモジュール ホット リロード (HMR)。
• 豊富な例: 一般的な Web ベースのプラグインの実装例。
• コンポーネントのカプセル化: 基本的な作業要件を満たすために、日常業務で頻繁に使用されるコンポーネントの二次カプセル化。

• テーマ設定: 豊富なテーマ設定オプションとダーク テーマの適応。
• アクセス制御: 包括的なフロントエンドおよびバックエンドのアクセス制御ソリューション。
• よく使用されるテンプレート: よく使用されるテンプレートが組み込まれているため、インタラクティブなレイアウトを考慮する必要がなくなり、プリセット スタイルを効率的に開発できます。
• 美しくエレガントなデザイン、Naive UI とのシームレスな統合を特徴とし、ページとレイアウト オプションの自由な組み合わせが可能です。
• さまざまなレイアウト ニーズを満たすために、高度な構成可能性を備えたさまざまなレイアウト モードを提供します。

6. 素朴なUI

Naive UI は、完全に TypeScript で記述された Vue 3 コンポーネント ライブラリです。

機能：70以上のコンポーネントを備え、比較的充実した構成で、コードの記述量を削減できます。すべてのコンポーネントがツリーシェイキングに対応しています。

カスタマイズ可能なテーマ：TypeScriptで構築された、高度な型安全なテーマシステムを提供します。スタイルをオーバーライドするオブジェクトを指定するだけで、あとは自動的に処理されます。

ちなみに、less、sass、CSS変数、​​Webpackローダーは必要ありません。右下にあるテーマエディターもお試しください。

Naive UIは完全にTypeScriptで記述されており、TypeScriptプロジェクトにシームレスに統合されます。コンポーネントを正しく動作させるためにCSSをインポートする必要はありません。

テーマ対応コンポーネントの作成：組み込みコンポーネントだけでは物足りないと感じ、独自のテーマ対応コンポーネントを作成したいという場合もあるでしょう。Naive UI は、開発者がテーマ対応コンポーネントを簡単に作成できるツールを提供しています。

インストールに関する注意: naive-ui は Vue3 のみをサポートします。

7. 大豆管理:

Soybean Adminは、Vue3、Vite3、TypeScript、NaiveUI、Pinia、UnoCSSをベースにした、クリーンでエレガントなバックエンドテンプレートです。最新の人気フロントエンドテクノロジースタックを採用し、豊富なテーマ設定、高いコードスタンダード、ファイルベースのルーティングシステム、Mockベースの動的権限ルーティングを備えています。すぐに使えるバックエンド・フロントエンドソリューションであり、学習やリファレンスとしても活用できます。

プロジェクトの特徴:

• 最新の人気テクノロジー スタック: Vue3、Vite3、TS、NaiveUI、UnoCSS などの最新のテクノロジー スタックに基づいて開発されています。
• 非常に高い水準のコーディング スタイル: 明確に定義されたコーディング スタイルと明確なコード構造。
• 豊富なプラグイン: 一般的な Web ベースのプラグインの例が実装されています。
• テーマ設定: 豊富なテーマ設定とダーク テーマの適応。
• ファイルベースのルーティング システム: ルート宣言、ルートのインポート、ルートを自動的に生成します。
• アクセス制御: 包括的なフロントエンドおよびバックエンドのアクセス制御ソリューション。

8. ブラー管理者スター

Blur admin は、製品開発をガイドし、プロトタイプや本番環境対応のアプリケーションを構築するためのエコシステムを提供するように設計された Angular フロントエンド管理ダッシュボード モジュールです。

プロジェクトの特徴:

優れた構造:フィーチャベースの構造は、大角度アプリケーションに適していることが証明されています。

シンプルなデザイン:それぞれの色と文字を慎重に選択した簡潔なモジュール設計。

簡単にカスタマイズ可能:わずか 2 分でさまざまな外観を作成できます。

9. iView管理者

iView admin は、Vue.js をベースとし、iView UI コンポーネント ライブラリを使用するバックエンド統合ソリューションです。

• iview.admin は実際にはバックエンド フレームワークです。
• Node.jsに依存します
• 起動に成功した後、二次開発を行うことができます。

10. Vuestic 管理者

Vuestic Adminは、44種類以上の簡単に設定できるUIコンポーネントを備えた、完全に無料のオープンソース管理テンプレートです。ユーザーフレンドリーで、クロスブラウザ対応、カスタマイズ可能、そしてレスポンシブ性に優れています。

この無料の美しくデザインされた Vue.js 管理テンプレートには、Epicmax によって開発され、Vasili Savitski によってデザインされた 38 を超えるカスタマイズ可能なユーザー インターフェイス コンポーネントが含まれています。

11. eladmin-jpa

eladmin-jpa バージョン: このプロジェクトは、Spring Boot 2.1.0、JPA、Spring Security、Redis、および Vue をベースにしたフロントエンドとバックエンドを分離したバックエンド管理システムです。

すぐに使用できる美しいインターフェースを備えたユニバーサルなバックエンド管理テンプレートです。

豊富な拡張コンポーネントとテンプレート ページが用意されており、さまざまなミッドエンドからバックエンドのアプリケーションに適しています。

製品の利点:

ソースコードが管理可能：コードにはバックドアがなく、安心して使用できます。ソースコードは適切にコメント化されており、読みやすいです。

包括的な機能:管理システムのよく使用される基本機能が含まれており、豊富なテンプレート ページと機能例が提供されます。

マルチプラットフォームのサポート:レスポンシブ デザインにより、主流の最新ブラウザーをサポートします。

• 簡単に始められます:包括的な製品開発ドキュメント、多数のデモ例、コンポーネントベースの開発、および承認されたユーザー専用のテクニカル サポート グループ。
• 低コスト:美しいインターフェースで、デザイン作業が不要になります。
  一度限りの永久ライセンス、生涯無料アップデート。
• アフターセールス サポート: 5x8 時間のオンライン サービスは、常に主流のテクノロジー スタックに基づいています。
  このバージョンは、一般のニーズを満たすために継続的に更新されます。

12. D2Admin

D2Adminは、完全にオープンソースで無料のエンタープライズ向けバックエンド製品とフロントエンド製品の統合ソリューションです。最新のフロントエンドテクノロジースタックを採用し、プロジェクトの準備作業の大部分が完了しており、管理システムのアジャイル開発を支援する多数のサンプルコードが付属しています。

13. ladmin-jpa バージョン:

このプロジェクトは、Spring Boot 2.1.0、JPA、Spring Security、Redis、Vue をベースにした、フロントエンドとバックエンドを分離したアーキテクチャを備えたバックエンド管理システムです。

主な特徴

最新のテクノロジースタックを使用し、豊富なコミュニティリソースを備えています。

高効率開発: コード ジェネレーターは、ワンクリックでフロントエンド コードとバックエンド コードを生成できます。

データ ディクショナリをサポートしているため、特定の状態を簡単に管理できます。

悪意のあるリクエストがサービス層に過度の負荷をかけるのを防ぐために、API レート制限をサポートします。

インターフェースレベルの機能権限とデータ権限をサポートし、カスタマイズされた操作を可能にします。

カスタム権限アノテーションと匿名 API アノテーションにより、迅速な API ブロックとアクセス制御が可能になります。

テーブル データ要求、データ ディクショナリなど、よく使用されるフロントエンド コンポーネントをカプセル化します。

フロントエンドとバックエンド全体で例外インターセプトと処理を統一し、例外出力に一貫性を持たせることで、面倒な条件チェックを回避します。

オンライン ユーザー管理とサーバー パフォーマンス監視をサポートし、単一ユーザー ログインの制限もサポートします。

運用・保守管理をサポートしており、リモート サーバー上のアプリケーションの導入と管理が容易になります。

14. アントデザインプロ

Ant Design Proは、Alibaba GroupのAnt Designチームによって開発・保守されている、エンタープライズグレードのUIデザイン言語とReactコンポーネントライブラリです。高品質なUIデザインと開発ソリューションを提供することに特化し、企業が独自のフロントエンドアプリケーションフレームワークを迅速に構築できるよう支援します。

レスポンシブ デザインの原則に従う: Ant Design Pro は、レスポンシブ デザインの原則を採用して、さまざまなデバイス間で一貫した表示を保証するとともに、さまざまなデバイス サイズへの適応もサポートします。

豊富なコンポーネント ライブラリ: Ant Design Pro は、フォーム、データの視覚化、レイアウト、ナビゲーション、メニューなどを網羅した豊富な React コンポーネント ライブラリを提供し、さまざまな開発者のニーズに応えます。

使いやすいスタイルのカスタマイズ: AntDesignPro はシンプルで使いやすいスタイルのカスタマイズ機能を提供しており、開発者はカスタム スタイルを通じて簡単にパーソナライズされたカスタマイズを実現できます。

包括的なドキュメントとコミュニティ サポート: Ant Design Pro には、開発者がすぐに作業を開始して問題を解決できるように、詳細な中国語のドキュメントと豊富なコミュニティ リソースが用意されています。

15. vue-admin-beautifu

Vue Admin Beautifulは、Vue.jsテクノロジースタックに基づいて開発された管理バックエンドテンプレートです。豊富な機能と柔軟なレイアウトを備えており、開発者が一流のバックエンド管理システムを迅速に構築するのに役立ちます。

Vue Admin Beautifulの主な利点は、多様なニーズに対応できる多様なコンポーネントにあります。ボタン、フォーム、パンくずリスト、ダイアログボックス、テーブルなど、100種類近くのコンポーネントが用意されており、開発者はさまざまなシナリオに最適なコンポーネントを選択できます。

さらに、Vue Admin Beautiful は高度にカスタマイズ可能なテーマ システムを提供しており、ユーザーはさまざまなブランドやデザインのニーズに合わせて独自の UI スタイルをすばやく作成できます。

16. AdminLTEスター

AdminLTE ブートストラップ管理ダッシュボード テンプレート。

クラス最高クラスのオープンソース管理ダッシュボードおよびコントロールパネルテーマ。AdminLTEはBootstrapをベースに構築されており、レスポンシブで再利用可能、かつ一般的に使用されるコンポーネントスイートを提供します。

プロジェクトの特徴:

HTML5 および CSS3: HTML5 および CSS3 の構文は W3C サービスによって検証されます。

レスポンシブデザイン：モバイルファーストデザイン。大型デスクトップから小型モバイルデバイスまで、幅広い解像度に対応します。

1000 以上のアイコン: Font Awesome、Ion Icon、Glyphicons を搭載。

ブラウザの互換性: Safari、IE9+、Chrome、FF、Opera など、ほとんどの主要ブラウザをサポートしています。

6 つのスキン:ブランドに合ったスキンを選択するか、LESS 変数を編集して独自のスキンを作成します。

強化された印刷機能：あらゆるページの印刷をサポートします。請求書ページなどがその好例です。