Webサービスを作っていて、必要になるのが管理画面です。多くは開発工程の最後に回されて、予算もないために簡易的な画面で作られます。しかしより良い管理を行うためには管理画面もこだわりたいものです。 今回はVue.jsを使った管理画面、VUESTICを紹介します。

VUESTICの使い方

トップページです。アイコンが大きめで分かりやすい表示です。

画面上部のアイコンをクリックするとメッセージが表示されます。

グラフです。

進捗。プログレスバーです。

入力系です。

テーブル表示も複数パターンで表示されています。

タイポグラフィ。

ボタン。

アイコンは様々なアイコン集に対応しています。

グリッド。

確認用のダイアログ。

アラート。

ログイン用のUI。

地図。

グローバルな地図。

拡大表示。ノードはアニメーションしています。

VUESTICには一般的な管理画面で必要な画面の構成要素を網羅しています。大抵のシステムであればVUESTICを使って作れるのではないでしょうか。こうしたUIデザインを使うことで使い勝手の良い管理画面を素早く提供できるはずです。Vue.jsを使うことで、慣れている方であればさらに生産性が高くなることでしょう。

VUESTICはVue.js/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

VUESTIC vuejs-admin epicmaxco/vuestic-admin: Vue.js admin dashboard