9つの革新的なオープンソースVueコントロールパネル

Vueは、最も人気のあるフロントエンド開発フレームワークの一つです。リアクティブでコンポーネントベースの構造的デザインパターンに基づいた、柔軟で軽量なWeb開発ソリューションを提供します。

振り返ってみると、Vue2は2014年にリリースされました。HTMLとJavaScriptの経験を持つ開発者にとって、このフレームワークの学習の容易さは、その堅牢性、スケーラビリティ、そして使いやすさによるものでした。リリースされるやいなや、フロントエンド開発コミュニティで急速に人気を博しました。

現在、多くのプロジェクトで Vue3 が使用されていますが、これは実際には 2020 年にリリースされたものです。Vue2 と比較して、Vue3 には、Composition API、TypeScript のサポートと機能強化の向上、読み込みパフォーマンスの向上など、多くの重要な改善点があり、Vue3 は大規模プロジェクトにより適しています。

Vue のエコシステムは強力なコミュニティサポートを誇り、さまざまな種類のプロジェクトで利用できる多数のコンポーネントライブラリ、ツール、ダッシュボードを備えています。

コントロールパネルとダッシュボードは、Webアプリケーションの最も基本的なファサードです。オープンソースコミュニティには、コントロールパネル、ダッシュボード、その他の類似インターフェースの構築にかかる時間を大幅に節約できるVueベースのコンポーネントやレイアウトが数多く存在します。

以下は、フロントエンドフレームワークテクノロジーの観点からさまざまなタイプのプロジェクトを選択できるように、2024 年に選ばれた、より革新的な Vue コントロールパネルプロジェクトの一部です。

1. ヴエスティック

https://github.com/epicmaxco/vuestic-admin

星の数: 10.5K

Vuestic-Adminは、Vue 3、Vite、Pinia、Tailwind CSSフレームワークをベースに構築された美しい管理インターフェーステンプレートです。効率的でレスポンシブ、そして読み込みが速い管理インターフェースを構築するために特別に設計されています。

主な機能は次のとおりです。

高速かつ効率的な開発: Vue 3、Vite、Pinia、Tailwind CSS に基づいています。
モダンで目を引く：ダークテーマをサポートします。
簡単なカスタマイズ: グローバル構成をサポートします。
包括性と使いやすさ。
統合された i18n: 簡単にローカライズでき、世界中をカバーします。
豊富な学習リソースにより、スキルの学習と向上に最適です。
レスポンシブデザインをサポートし、すべてのデバイスにシームレスに適応します。
専門家チームによるサポートで、信頼できるサポートを提供します。
プロジェクトのスタイルに合わせて高度にカスタマイズできます。

デモ: https://admin-demo.vuestic.dev/dashboard

2.V3管理者

https://github.com/un-pany/v3-admin-vite

星の数: 4.9K

V3 Admin Vite は、Vue3、TypeScript、Element Plus、Pinia、Vite などの主流のフレームワーク上に構築された、無料のオープンソースのミドルおよびバックエンド管理システムの基本ソリューションです。

機能は次のとおりです:

ユーザー管理: ログインとログアウトのデモ
アクセス制御: ページレベルの権限 (動的ルーティング)、ボタンレベルの権限 (コマンド権限、権限機能)、およびルートナビゲーションガード。
複数の環境: 開発、パイロット運用、本番
複数のテーマ: 通常、ダーク、ダークブルー、3 つのテーマモード
複数のレイアウト: 左、上、左上の 3 つのレイアウトモード
エラーページ: 404 エラーページ
ダッシュボード: ユーザーごとに異なるダッシュボードページを表示します。
その他の機能: SVG、動的サイドバー、動的パンくずナビゲーション、タブナビゲーション、フルスクリーンモード、適応型折りたたみサイドバー、フック (組み合わせ可能)。

テクノロジースタック:

Vue3: Vue3 + スクリプトを使用した最新の Vue3 複合 API
Element Plus: Element UI の Vue 3 バージョン
Pinia: Vue3 の Vuex の代替
Vite: 本当に速い
Vueルーター: ルーター
TypeScript: JavaScript と型マッチング
PNPM: より高速でディスクスペースを節約できるパッケージ管理ツール
SCSS: Element Plus と一貫性がある
CSS 変数: 主にプロジェクトのレイアウトと色を制御します。
ESLint: コード検証
Prettier: コードのフォーマット
Axios: PromiseベースのHTTPクライアント（カプセル化）
UnoCSS: 高性能で柔軟なリアルタイムアトミックCSSエンジン
モバイル互換性: レイアウトはモバイルページの解像度と互換性があります。

3. Vue Element-plus 管理者

https://github.com/kailong321200875/vue-element-plus-admin

星の数: 2.7K

vue-element-plus-admin は、element-plus をベースにした、無料のオープンソースのミドルおよびバックエンドテンプレートです。Vue 3、Vite、TypeScript といった最新の主流技術を活用し、すぐに使えるミドルおよびバックエンドのフロントエンドソリューションを提供します。プロジェクトの立ち上げテンプレートとして、また学習やリファレンスとしてもご利用いただけます。

vue-element-plus-admin はバックエンド統合ソリューションとして位置付けられており、二次開発用のベーステンプレートとしては適していません。これは、必要のない機能を多数統合しているため、コードが冗長化してしまうためです。ただし、プロジェクトでこの点を優先していない場合は、vue-element-plus-admin を直接利用して開発を進めることができます。

機能は次のとおりです:

最新の技術スタック: Vue3/vite4などの最先端のフロントエンド技術を使用して開発
TypeScript: アプリケーションレベルのJavaScript言語
テーマ: 設定可能なテーマ
国際化: 包括的な国際化ソリューションを内蔵
カスタムデータ; 組み込みのモックデータスキーム
権限: 包括的な動的ルーティング権限生成スキームが含まれています。
コンポーネントは、一般的に使用されるいくつかのコンポーネントを二次的にカプセル化したものです。
例: 豊富な組み込み例

4. Sing App Vueダッシュボード

https://github.com/flatlogic/sing-app-vue-ダッシュボード

星: 695

Sing App Vueは、会計ソフトウェア、顧客関係管理（CRM）、メール管理、マーケティングオートメーション、ウェブサイト分析などと連携できる、無料のオープンソース管理インターフェーステンプレートです。このテンプレートを活用することで、開発者はすべてをゼロから構築するのではなく、独自の機能の開発に集中できます。また、デモの閲覧、ダウンロード、バージョンチェック、サポートオプションも提供しています。主な機能は以下のとおりです。

Bootstrap 4.5を使用して構築されたレスポンシブレイアウト
複数のフレームワーク (Bootstrap 4、React、Vue.js、Angular、AngularJS) のバージョンを提供します。
効率的な開発のための組み込みコンポーネントが含まれています。
特定の機能を備えた合理化されたバージョンを提供する
レイアウト機能
テーブルデザインを提供する
通知する
基本的なチャート
さまざまなアイコン
マップサポート
エッジバーの適応

5. モザイクライトビュー

https://github.com/cruip/vuejs-admin-dashboard-template

星: 246

Mosaic Lite Vueは、Tailwind CSSをベースにVue.jsのみで開発されたレスポンシブなダッシュボードテンプレートです。SaaS製品、管理ダッシュボード、最新のWebアプリケーションなどのユーザーインターフェースを開発したい方にとって、このテンプレートは最適な基盤となります。

6. Vue TSX 管理者

https://github.com/manyuemeiquqi/vue-tsx-admin

星: 237

Vue TSX Adminは、ミドルエンドおよびバックエンド管理システム向けの無料かつオープンソースのフロントエンドテンプレートです。Vue 3 + TSXを使用して開発されており、すぐに使えるミドルエンドおよびバックエンドソリューションを提供します。i18n対応、カスタマイズ可能なレイアウト、テーマカラーの変更、権限検証、洗練されたビジネスモデルなどの機能を備えており、ミドルエンドおよびバックエンドプロジェクトの迅速な構築に役立ちます。

主な特徴は次のとおりです。

CSSソリューション：モジュールCSS + Shunfeng
ネットワークリクエスト: axios
認証スキーム: トークン + JWT
シミュレートされたバックエンドデータ: mockjs
ストレージ管理: pinia
UI コンポーネントライブラリ: arco designvue
ユーティリティライブラリ: lodash + vue-use
国際化切り替えソリューション: vue-i18 n
パッケージングソリューションとロケール静的サーバー: vite

7.管理者1

https://github.com/justboil/admin-one-vue-tailwind

星の数: 2.1K

Admin Oneは、Vue.js 3.xとTailwind CSS 3.x向けのシンプルで美しい管理ダッシュボードです。Nuxt 3.xまたはLaravel 9.xと統合できます。

主な機能的特徴は次のとおりです。

Vue.js 3 とその Composition API を使用して Tailwind CSS 3 フレームワークを構築する
Viteの内部
Nuxt 3統合が利用可能
Laravel、Breeze、Inertia、Vue の統合が利用可能です。
SFC
ピニア州立図書館（公式Vuex 5）
ダークモードをサポート
カスタムスタイルのスクロールバー
ルーター付きSPA
CSS ファイルはわずか 38kb です。
再利用可能なコンポーネント
MITライセンスの下で無料
高度なバージョンサポートを提供

8. Django Vue3 管理者

https://github.com/huge-dream/django-vue3-admin

星: 316

Django-Vue 3-Adminは、ロールベースアクセス制御（RAC）モデルに基づくアクセス制御のための包括的な基本開発プラットフォームであり、列レベルの粒度でアクセス制御が可能です。フロントエンドとバックエンドを分離したアーキテクチャを採用しており、バックエンドではDjangoとDjango Rest Framework、フロントエンドではVue3、Composition API、TypeScript、Vite、Element Plusを使用しています。

主な機能は次のとおりです。

RBAC モデル: 正確な権限管理のためのロールベースの列レベルのアクセス制御。
フロントエンドとバックエンドの分離: 世界最高の2つの最新アーキテクチャを組み合わせる
堅牢なバックエンド: Django と Django Rest Framework はスケーラブルな基盤を提供します。
最新のフロントエンド開発: 効率的な UI を実現する Vue3、Composition API、TypeScript、Vite、Element Plus。
オープンソース: 個人使用は無料、グループライセンスオプションも利用可能。
動的アクセス制御: 動的アクセスメニューの読み込みをサポートします。
マルチターミナル認証: Django RESTフレームワークSimpleJWTの使用
きめ細かなセキュリティ: きめ細かなデータアクセスのための列レベルのアクセス制御
迅速な開発: 小規模アプリケーションと大規模アプリケーションの両方のワークフローを合理化
柔軟性: アイデアを効果的に現実のものにするためのツールと機能。

Django-Vue 3-Admin はこれらすべての機能を組み合わせて、さまざまなプロジェクトに適した強力で安全かつ効率的な開発プラットフォームを開発者に提供します。

9.Shadcn UI Vue 管理者

https://github.com/devlive-community/shadcn-ui-vue-admin

Shadcn UI、Vite、Vueを使用して構築された機能豊富な管理インターフェースです。応答性とアクセシビリティを重視しています。

機能的な特徴は次のとおりです。

レスポンシブデザイン
アクセシビリティ
光と闇のテーマをサポート
箱から出してすぐに使用可能
多言語サポート
マルチレイアウトサポート