2022 年に収集する価値のある 17 の Vue バックエンド管理テンプレート

この記事では、収集する価値のある 17 個の vue バックエンド管理テンプレートを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連する推奨事項: 「vue.js チュートリアル 」

背後にあるテンプレートは、バックエンド管理システムを実行するときによく必要になるものです。独自のテンプレートを最初からデザインするのにはいつでも多くの時間を費やすことができますが、使用できる最新のテンプレートがあるので、より多くの時間を節約できます。

これらの優れた既存のテンプレートには、時間の節約に加えて、次のような利点があります。

• 一般的なユースケース用の組み込みコンポーネント
• さまざまなビュー間で一貫したスタイル
• 組み込みのレスポンシブ デザイン
• テクニカル サポートとドキュメント

1. Vue Black Dashboard Pro

オンライン アドレス: https://demos.creative-tim.com/vue-black-dashboard-pro/?ref=learnvue.co#/dashboard
詳細: https://www.creative-tim.com/product/vue - black-dashboard-pro?ref=learnvue.co

Vue Black Dashboard Pro は、数十のコンポーネントを含む Bootstrap 4 管理者ダッシュボードです。私たちの設計ニーズに完全に適合する要素、プラグイン、サンプルコード。

このデフォルトの配色は非常に美しく、アプリケーションに一定レベルのプロ意識と磨きをかけていると感じます。

同時に、ダークモードとライトモードもあります。この切り替え機能により、アプリを目立たせるカスタマイズ層がさらに追加されます。

Vue Black Dashboard Pro は、vue-cli および vue-router に基づいて構築されており、ドキュメントも非常に詳細に記載されています。

Vue Black Dashboard Pro 主な機能:

• Bootstrap 4 に基づく

• 多くの例を含む詳細なドキュメント

• 200+ カスタム要素

• Sketch、Vue、SASS、HTML ソース ファイル

• レスポンシブ デザイン

• ダーク モードとライト モード

2. Vue Paper ダッシュボード

##オンラインの例: https://demos.creative-tim.com/vue-paper-dashboard-pro/?_ga=2.230603804.163601398.1609605836-1654756133.1608582691

ドキュメントのアドレス: https://www.creative -tim.com/product/vue-paper-dashboard-2-pro?ref=learnvue.co

Vue Paper Dashboard 2 Pro のサンプル ページを見るだけで、注意点まで正しく理解できます。さまざまなコンポーネントや要素の詳細をご覧ください。

このテンプレートで私がさらに興味を持っているのは、コード ベースがどのように構成されているかで、この構成により、インストールと操作が非常に直感的になります。

主な機能:

• 優れたドキュメント

• Bootstrap 4 に基づいています

• RESPONSIVEDESIGN

• 160 以上のカスタム要素

• デザイナー向け Photoshop ファイル

3 Vue Light Bootstrap Dashboard Pro

アドレスの例: https://demos.creative-tim.com/vue-light-bootstrap-dashboard-pro/? &_ga=2.208068498.163601398.1609605836-1654756133.1608582691#/admin/overview

ドキュメントのアドレス: https://www.creative-tim.com/product/vue-light-bootstrap-dashboard- pro?ref=learnvue.co

名前が示すように、Vue Light Bootstrap Dashboard Pro は Bootstrap 4 と VueJS を使用して構築されています。

Vue Light Bootstrap で私が本当に気に入っている点の 1 つは、サイドバーをさまざまな色、背景画像、その他のスタイルにカスタマイズできることです。

この機能を使用すると、開発者は特定のプロジェクトのニーズに合わせてカスタマイズできます。追加のプログラミングを何時間も費やすことなく、カスタム感を実現します。

主な機能:

• Bootstrap 4 ベース

• ##160+ カスタム要素

• #レスポンシブ デザイン

• 高度にカスタマイズ可能なサイドバー メニュー

4. Sing App Vue

オンライン アドレス: https:// flatlogic.com/templates/sing-app-vue/demo

ドキュメント アドレス: https:// flatlogic .com/templates/sing-app -vue

Sing App Vue は、Vue2 と Bootstrap 4 で構築された優れた管理テンプレートです。私は個人的にこのテンプレートのスタイルがとても気に入っており、このテンプレートが従うモダンなデザイン原則が大好きです。

主な機能:

• レスポンシブ デザイン

• 8 つのグラフ ライブラリと 2 つのダッシュボード

• 電子商取引セクション

• 完全に文書化されたコードベース

5. Vue Paper ダッシュボード

サンプル アドレス: https://demos.creative-tim.com/ vue-paper-dashboard/?_ga=2.133615758.163601398.1609605836-1654756133.1608582691#/dashboard

ドキュメントのアドレス: https://www.creative-tim.com/product/vue-paper-dashboard?ref=learnvue。 co

このテンプレートは Vue2 と Bootstrap 3 で構築されており、プロトタイピングや概念実証に最適です。 Vue Paper には 16 個の要素しかありませんが、他の 150 個以上の要素は有料の Creative Tim から提供されています。無料の 16 個の要素を使用しなくても、学ぶべきことはたくさんあります。

主な機能:

• 無料ダウンロード

• 16 個以上のカスタム要素

• Bootstrap3 管理者テンプレート

• レスポンシブ デザイン

6.CoPilot

オンライン アドレス: https://copilot.mistergf.io/
ドキュメント アドレス: https://github.com/misterGF/CoPilot

CoPilot は、ブートストラップに基づくもう 1 つの無料のレスポンシブ管理テンプレートです。オープンソース プロジェクトなので、CoPilot を使い始めるのは、Github リポジトリのクローンを作成するのと同じくらい簡単です。

私は、CoPilot ページの上部にある美しいローダー アニメーションが大好きです。さまざまなコンポーネントをロードする際の進行状況バーは、アプリにモダンで洗練された雰囲気を与えます。

主な機能:

• オープンソース

• レスポンシブデザイン

• クリーン直感的なユーザー インターフェイス

• 迅速なインストール

7. Vuetify マテリアル ダッシュボード

オンライン アドレス: https://demos.creative-tim.com/vuetify-material-dashboard-pro/?_ga=2.4509107.163601398.1609605836-1654756133.1608582691#/

ドキュメント: https:/// www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=learnvue.co

Vuetify フレームワークの経験を持つ Vue 開発者にとって、Vuetify マテリアル ダッシュボードは優れた選択肢です。

このテンプレートは見た目が優れているだけでなく、マテリアル デザインの仕様を活用してクリーンでアクセスしやすいユーザー インターフェイスを作成します。色は素晴らしく、テンプレートはカスタマイズしやすく、全体的にすべてがよくできています。

上記と比較すると、このテンプレートには状態管理を行う Vuex が付属しており、この組み込みテンプレートにはいくつかの利点があります。

主な機能:

• 組み込み Vuetify
• Vuex の組み込みサポート
• 高度にカスタマイズ可能なテンプレート
• 200複数のカスタム要素
• レスポンシブ デザイン

8. Vue White ダッシュボード

サンプル アドレス: https ://demos.creative-tim.com/vue-white-dashboard/
ドキュメント: https://www.creative-tim.com/product/vue-white-dashboard?ref=learnvue.co

Vue White Dashboard は、無料の Bootstrap 4 管理テンプレートです。 16 個の無料要素、3 個のカスタム プラグイン、7 個のサンプル ページが含まれており、ダッシュボードをテストする無料の方法を探している人にとっては優れた出発点となります。

主な機能:

• 無料
• Bootstrap4管理テンプレート
• レスポンシブデザイン
• 16のカスタム要素

9. Vue Chuck 管理者

アドレスの例: https://alpixel.github.io/vue-chuckadmin/ #/

ドキュメント アドレス: https://github.com/alpixel/vue-chuckadmin

このオープン ソースの Vue 管理テンプレートは、ChuckCSS フレームワークに基づいて構築されています。 vue-router や Vuex など、多くの Vue ライブラリがコードに追加されました。

これは「すぐに使える」ものではないかもしれませんが、開発者はダッシュボードのレイアウト、デザイン、構造にさらなる柔軟性を提供します。

主な機能:

• オープンソース
• 高度にカスタマイズ可能
• 組み込みの Vue ライブラリ

# 10 . CoreUI Vue

オンライン アドレス: https://coreui.io/vue/demo/free/3.1.1/#/dashboard

ドキュメントアドレス: https://coreui.io/vue/

CoreUI Vue は、CoreUI の無料の Vue テンプレートです。 Bootstrap 上に構築されており、ボタン、カード、画像カルーセルなどの 100 を超えるカスタム要素が提供され、開発プロセスを手間のかからないものにします。

CoreUI のスタイルとドキュメントの明瞭さがとても気に入っています。

主な機能:

無料の Vue テンプレート
• 優れたドキュメント
• モバイル対応、ブラウザ間の互換性
• 100+再利用可能でカスタマイズ可能なウィジェット

11. Vue 要素管理

オンライン アドレス: https://panjiachen.github.io/vue-element-admin/#/login?redirect=/dashboard

ドキュメント アドレス: https://github.com/PanJiaChen/vue -element-admin

Vue Element Admin は、別のオープン ソース Vue バックエンド テンプレートです。これは、Github 上に 63,000 個のスターがあり、非常に人気のある Element UI ライブラリに基づいて構築されています。

無料ツールの場合、Vue Element Admin には大量のコンポーネント、ページ、機能が含まれています。

これは、ログイン権限、テキスト エディタ、データ エクスポート、その他の機能が組み込まれているため、強力なバックエンド テンプレートが必要な場合に適しています。

主な機能:

• オープンソース
• レスポンシブな要素
• 多くの機能
• 高度にカスタマイズ可能

12. Vuestic

オンライン アドレス: https://vuestic.epicmax.co/admin/dashboard
ドキュメント アドレス: https ://github.com/epicmaxco/vuestic-admin

Vuestic Admin は、44 のカスタム UI コンポーネントを含む無料の Vue.js 管理テンプレートです。

Vuestic Adminn は、ダッシュボードのあらゆるニーズに合わせて高度にカスタマイズ可能で、スタイリッシュでプロフェッショナルな方法でデータを表示できるように設計されています。

主な機能:

• 無料の管理者用テンプレート
• 高度にカスタマイズ可能な 44 の要素
• 複数のテーマ
• レスポンシブ デザイン

13. Bootstrap Vue Argon Dashboard Pro

Creative Tim によるこのダッシュボードは、視覚的には私のお気に入りのダッシュボードの 1 つです。すべての要素は非常にきれいに見え、データが効率的に表示され、すべてをカスタマイズするのが非常に簡単です。

SASS スタイルを使用して変更できる 200 以上のコンポーネントがあるため、このテンプレートを使用すると開発が簡単になります。

主な機能:

• 200 要素
• レスポンシブ ブートストラップ ダッシュボード
• 17 のカスタム プラグイン
• 優れたドキュメント

##14. Vue マテリアル テンプレート

オンライン アドレス: https:// flatlogic.com/templates /vue-material-template- full/demo

ドキュメント アドレス: https:// flatlogic.com/templates/vue-material-template-full

Vue マテリアル管理テンプレート

Yes Vue ベースのマテリアル デザイン バックエンドVuetifyjs を基本フレームワークとして使用する管理テンプレート。 主な機能:

スムーズなレスポンシブ デザイン

• Vuetify とマテリアル デザインに基づく
• 3 つのカラー テーマとダーク モード
• Vuex および Vue-Router のサポート

15. ライト ブルー Vue Lite

##ライト ブルー Vue テーマ Vue 管理者テンプレート ( Light Blue Vue Admin) は、ユニークなデザイン、わずかに透明なウィジェット、グラデーション背景を備えた無料の Vue.js および Bootstrap 4 ダッシュボード テンプレートです。

ライトブルー Vue 管理テンプレート (ライトブルー Vue Admin) を使用すると、IoT ダッシュボード、SAAS スタートアップ、予約管理システム、またはその他の Web アプリケーション用の管理インターフェイスを簡単に構築できます。

16. Vue マテリアル ダッシュボード

Vue マテリアル ダッシュボードは、Vue を使用する別のツールです。マテリアル 無料のリソース。これは、高速なアプリケーションを構築するための優れたテンプレートであり、大規模なアプリケーションにも使用できます。

コード自体は十分に文書化されており、カスタマイズが簡単で、Vue Router もすでにセットアップされています。

主な機能:

無料テンプレート

Vue マテリアルの使用
• 優れたドキュメント
• オンライン アドレス: https ://demos.creative-tim.com/vue-material-dashboard/

ドキュメントのアドレス: https://www.creative-tim.com/product/vue-material-dashboard?ref =learnvue。 co

#17. Vue Now UI ダッシュボード プロ

オンライン アドレス: https://demos.creative-tim.com /vue-now-ui-dashboard-pro/?_ga=2.201309230.163601398.1609605836-1654756133.1608582691#/dashboard

ドキュメント: https://www.creative-tim.com/product/vue-now -ui- Dashboard-pro?ref=learnvue.co

翻訳アドレス: https://segmentfault.com/a/1190000039833325

プログラミング関連の知識の詳細については、次を参照してください:

プログラミングビデオ

! ！

以上が2022 年に収集する価値のある 17 の Vue バックエンド管理テンプレートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。