Vue.js製のオープンソース管理画面テンプレート「Vuestic Admin 2.0」

「Vuestic Admin 2.0」は、Vue.jsで作られたオープンソースの管理画面テンプレートです。Bootstrapに依存しない高品質のコンポーネントで、今までに比べて自由に作り込みができそうです。

◆ Vuestic Admin 2.0
https://vuestic.epicmax.co/admin/dashboard

紹介

非常に美しいUIで設計されています。

導入

Node.js (>=8.9)
npm version 3+ (or yarn version 1.16+) and Git.

こちらが必要なバージョン要件。今回はyarnで導入してみます。

$ git clone https://github.com/epicmaxco/vuestic-admin.git anypicksmng

Cloning into 'anypicksmng'...
remote: Enumerating objects: 132, done.
remote: Counting objects: 100% (132/132), done.
remote: Compressing objects: 100% (101/101), done.
remote: Total 15983 (delta 62), reused 83 (delta 20), pack-reused 15851
Receiving objects: 100% (15983/15983), 5.91 MiB | 3.19 MiB/s, done.
Resolving deltas: 100% (10399/10399), done.

まずはインストールを実行

$ cd anypicksmng/

続いて作成されたプロジェクトに移動します。

$ yarn install

yarn install v1.17.3
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
~~~
[5/5] 🔨  Building fresh packages...
✨  Done in 20.96s.

パッケージをインストールが出来たら

$ yarn build

アプリケーションを起動します。

localhost:8080にアクセスすると、管理画面が起動します。
非常に美しい管理画面が手軽に構築できるので、ぜひ試してみてください!

◆ Vuestic Admin 2.0
https://vuestic.epicmax.co/admin/dashboard


コメントを読む

新着ピック  






















新着ニュース

SQL Serverからデータを取得するためにsqlcmdをインストールする | Developers.IO

年末はお得にキャッシュレス! スマホ決済12月のキャンペーンまとめ

Googleアシスタントのリアルタイム通訳機能がiOSとAndroidでも利用可能に

#13:SnowflakeのALTER TABLE SWAPが超絶的に便利だった件 – Snowflake Advent Calendar 2019 #SnowflakeDB | Developers.IO

#13:SnowflakeのALTER TABLE S...

DevelopersIO / 6時間前


ステートマシーンを簡単に作るための「AWS Step Functions Data Science SDK」の紹介 | Developers.IO

re:Invent 2019宿泊ホテルからモバイル回線の速度計測をしてみた [今年も3キャリアを比較] #reinvent | Developers.IO

アップル、国内10店舗目の「Apple 川崎」を12月14日にオープン--記念プレゼントは?

メルペイの社内向け管理画面を振り返る - Mercari Engineering Blog

[レポート] MDS313 Hotstar: ライブストリーミングの記録的なスケール #reinvent | Developers.IO

Amazon Redshift の新機能「Auto Vacuum & Auto Sort」の徹底検証 #reinvent | Developers.IO

Alteryx 2019.4 新機能:Galleryのワークフロー一覧表示にリスト形式が対応しました | Developers.IO

ジャニーズ事務所の会員制サイト「Johnny's web」で不具合? トップページが「キンプリ」ロゴに 運営元が緊急メンテ

入社して4カ月目でAWS 認定ソリューションアーキテクト アソシエイトに合格できた話 | Developers.IO

ポケモンGOで“胃袋カイリュー”など復活 「新規勢にも過去の強力なわざを」 対人戦の新仕様も

PS4 Pro、1万円オフで3万円に クリスマスキャンペーンで

「Fargate for EKS」というタイトルでre:Growth 2019に登壇しました #reinvent #cmregrowth | Developers.IO

[レポート] DeepRacerのイベントを開催しよう – Roll Your Own DeepRacer Event #reinvent | Developers.IO

[re:Invent2019] [レポート] WIN308 – Developing serverless .NET Core on AWS #reinvent | Developers.IO

[re:Invent2019] [レポート] WIN3...

DevelopersIO / 14時間前


AWS re:Invent 2019 AWSブースで配布してたDBの薄い本を読む #reinvent | Developers.IO

ダイキンが進めるAirTechとは?第2回事業創造プログラムの募集を開始 | TechCrunch Japan

もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。