概要
管理者用画面としてとてもきれいな画面を提供している OSS を見つけましたので、今回はこちらについてご紹介します。
今回ご紹介する OSS は、Vue3、Vite5、TypeScript、Pinia、UnoCSS などの最新のフロントエンド技術に基づいた、見た目がとてもきれいな管理者用テンプレート「Soybean Admin」になります。
「Soybean Admin」は管理者用テンプレート画面をワンストップで、こちらの機能をそのままの状態で提供してくれるということです。
それでは早速こちらの OSS についてみていきましょう！
目次
特徴
特徴としては以下の点があります。
- 最先端のテクノロジーアプリケーション：Vue3、Vite5、TypeScript、Pinia、UnoCSS などの最新で人気のある技術を使用
- わかりやすいアーキテクチャ：pnpm monorepo アーキテクチャを利用し、理解しやすく明確な構造化を採用
- 厳格なコード仕様：ESLint、GitHooks を採用し、コードの標準化を実現
- TypeScript の採用：ソースコード上の型チェックコードの保守性を向上
- リッチテーマ構成：UnoCSS を採用
- 多言語対応組み込み：多言語サポートを容易に実現可能
- 自動化されたファイルルーティングシステム：ルートのインポート、宣言、型情報を自動生成
- 柔軟なルーティング機能：フロントエンドの静的ルーティングとバックエンドの動的ルーティングの双方をサポート
- 豊富なページコンポーネント：403、404、500 ページ、レイアウトコンポーネント、タグコンポーネント、テーマ構成など様々なページコンポーネントが組み込み済み
- モバイル適応：適応レイアウトを実現するためにモバイル版ターミナル画面もサポート
利用手順
事前準備
事前に以下要件を見たいしていることが必要です。
- git：プロジェクトバージョン複製して管理するために、git がインストールされていること。まだの場合は、以下のサイトから git をダウンロードします。
- Node.js バージョン 18.0.0 以上、推奨は 18.9.0 以上。まだの場合は、以下のサイトから Node.js をダウンロードします。
- pnpm バージョン 8.0.0 以上、推奨 8.14.0 以上。まだの場合は、以下コマンドで事前にインストールしておきます。
npm install -g pnpm
インストール方法
プロジェクトのクローン
git clone https://github.com/soybeanjs/soybean-admin.git
依存関係の意ストール
pnpm i
このプロジェクトでは pnpm monorepo 管理方法を使用しているため、依存関係をインストールするために npm または yarn を使用しないこと
プロジェクトの開始
pnpm dev
プロジェクトのビルド
pnpm build
サンプルサイトで利用
もしくは、サンプルサイトも提供されていますので、ローカル環境に本 OSS をクローンしなくてもさわりだけなら確認できます。
使用感
早速私も今回の管理者用テンプレート OSS「Soybean Admin」を触ってみました。
管理者画面については、基本内部の人間やサービス運営の人しか触らないため UI などは後手後手になってしまうことが多々あるかと思いますが、こちらの OSS を使用すればとてもきれいで使い勝手のよさそうな画面が構成できそうです！
一例として画像をいくつか貼っておきます。
- ログイン画面
- ホーム画面
- 403 ページ
- 利用者管理画面
- 詳細情報画面
- モバイル画面
まとめ
今回は、Vue3、Vite5、TypeScript、Pinia、UnoCSS などの最新のフロントエンド技術に基づいた、見た目がとてもきれいな管理者用テンプレート「Soybean Admin」をご紹介しました。
管理者用テンプレート画面としてはとてもきれいで使いやすいサービスになっているかと思います。
こちらはこのまま利用可能ということなので、管理者用テンプレート画面を探している方は、ぜひ一度こちらの管理者用テンプレート OSS「Soybean Admin」を見てみてはいかがでしょうか。
