1. Project Overview

SoybeanAdmin

SoybeanAdmin is a clean, elegant, visually appealing, and powerful backend administration template built with the latest frontend technology stack, including Vue3, Vite7, TypeScript, Pinia, and UnoCSS. It comes with extensive theme configurations and components, follows strict coding standards, and implements an automated file-based routing system. It also adopts an online mock data solution based on ApiFox. SoybeanAdmin provides a one-stop backend administration solution that requires no additional configuration and works out of the box. It is also an excellent practical example for quickly learning cutting-edge technologies.

2. Open Source License

Licensed under MIT

3. Screenshots

Example Screenshots

4. Feature Overview

A clean, elegant, beautiful and powerful admin template, based on Vue3, Vite5, TypeScript, Pinia and UnoCSS.

A clean, elegant, visually appealing, and powerful backend administration template built with the latest frontend technology stack, including Vue3, Vite5, TypeScript, Pinia, and UnoCSS.

Features

• Cutting-Edge Technology
  Uses the latest popular technology stack, including Vue3, Vite7, TypeScript, Pinia, and UnoCSS.
• Clear Project Architecture
  Uses a pnpm monorepo architecture with a clear, elegant, and easy-to-understand structure.
• Strict Coding Standards
  Follows SoybeanJS conventions and integrates eslint, prettier, and simple-git-hooks to ensure consistent code quality.
• TypeScript
  Supports strict type checking to improve code maintainability.
• Rich Theme Configuration
  Includes a variety of built-in theme configurations with seamless UnoCSS integration.
• Built-in Internationalization
  Easily implement multilingual support.
• Automated File-Based Routing System
  Automatically generates route imports, declarations, and types. For more details, please refer to Elegant Router.
• Flexible Permission-Based Routing
  Supports both frontend static routing and backend dynamic routing.
• Rich Page Components
  Includes a variety of built-in pages and components, including 403, 404, and 500 error pages, as well as layout components, tab components, theme configuration components, and more.
• Command-Line Tool
  Built-in efficient command-line tools for Git commits, file deletion, publishing, and more.
• Mobile Compatibility
  Full mobile support with responsive layouts.

5. Tech Stack

Usage

Environment Preparation

Make sure your environment meets the following requirements:

• git
  You need Git to clone the project and manage its versions.
• NodeJS
  >=20.19.0, version 20.19.0 or later is recommended.
• pnpm
  >= 10.5.0, version 10.5.0 or later is recommended.

Clone the Project

git clone soybean-admin

Install Dependencies

pnpm i

Since this project uses pnpm monorepo for project management, please do not use npm or yarn to install dependencies.

Start the Project

pnpm dev

Building projects

pnpm build

Code Synchronization

Refer to the Code Synchronization documentation.