1. Project Overview

Soybean Admin is a fresh and elegant admin dashboard template based on Vue3, Vite3, TypeScript, NaiveUI, Pinia, and UnoCSS. It uses the latest frontend technology stack, includes rich theme configuration options, and follows highly standardized coding practices. With dynamic permission-based routing implemented through mock data, it provides a ready-to-use frontend solution for admin dashboards and can also be used for learning and reference.

2. Open Source License

Licensed under MIT

3. Screenshots

Project Screenshots

4. Feature Overview

Features

• Latest Technology Stack: Developed using cutting-edge frontend technologies such as Vue3 and Vite2, with pnpm as the efficient npm package manager
• TypeScript: Application-level JavaScript language
• Theme: Rich configurable themes, dark mode, and dynamic theme colors based on the atomic CSS framework - UnoCSS
• Code Standards: Rich code quality plugins and highly standardized coding practices
• Permission-Based Routing: A file-based routing system and mock-based dynamic routing enable rapid implementation of backend-driven dynamic routes
• Request Functions: A comprehensive Axios-based request function wrapper that provides both Promise-based and hooks-based request functions, with an adapter for transforming response data

5. Tech Stack

Installation and Usage

• Environment Configuration The local environment requires pnpm 7.x, Node.js 14.18+, and Git
• Clone the Repository

Access to One Flying Open-source: https://code.exmay.com/ Download

• Install Dependencies

pnpm i

• Run

pnpm dev

• Packaging

pnpm build

Docker Deployment

• Deploy Soybean with Docker
• 
  

docker run --name soybean -p 80:80 -d soybeanjs/soybean-admin:v0.9.6

• Access SoybeanAdmin

Open your local browser and visithttp://localhost

Browser support

For local development, we recommend usingChrome 90+ browser

Supports modern browsers; IE is not supported

IEEdgeFirefoxChromeSafarinot supportlast 2 versionslast 2 versionslast 2 versionslast 2 versions

Tool Configuration

This project recommends using VSCode for development. VSCode configuration is already included in the project, with recommended extensions and settings.

The following extensions are recommended:

• Auto Close Tag - Automatically adds closing tags for HTML/XML
• Auto Complete Tag - Adds closing tags for HTML/XML and automatically renames paired tags
• Auto Import - Automatically finds, resolves, and provides code actions and completions for all available imports
• Auto Rename Tag - Automatically renames paired HTML/XML tags
• Color Highlight - Color highlighting extension
• DotENV - Syntax highlighting for .env files
• EditorConfig for VS Code - Unifies configuration settings across different editors
• ESLint - Code linting
• Git Graph - Graphical Git management tool
• GitLens — Git supercharged - Displays Git information for specific lines of code
• Icônes - Extension for searching Iconify icons
• Iconify IntelliSense - Extension for real-time Iconify icon previews
• javascript console utils - Provides the Ctrl+L shortcut to directly insert console.log()
• Material Icon Theme - Icon theme providing various icons for files and folders
• Path Intellisense - Intelligently displays import paths
• Prettier - Code formatter - Code formatting extension
• UnoCSS - Autocomplete suggestions for UnoCSS syntax
• Vue Language Features (Volar) - Volar extension, providing language support for Vue 3
• Vue VSCode Snippets - Code snippets for Vue 2 and Vue 3