v3-admin-vite by un-pany - RepoMind Architecture & Analysis

<div align="center"> <img alt="logo" width="120" height="120" src="./src/common/assets/images/layouts/logo.png"> <h1>V3 Admin Vite</h1> </div>

<b>English | <a href="./README.zh-CN.md">中文</a></b>

Introduction <a href="https://mp.weixin.qq.com/s/ccuzm4ZlHvN-1XBBN2lduQ"><img src="https://img.shields.io/badge/AI-VibeCoding-black"></a>

V3 Admin Vite is a well-crafted backend management system template, built with popular technologies such as Vue3, Vite, TypeScript, and Element Plus, and offers a great AI Vibe Coding experience!

Notifications

[!IMPORTANT] Welcome to experience the brand-new version 5.0, a masterpiece crafted with great care! If it helps you, feel free to give a Star to show your support.

[!WARNING] Version 4.x will no longer be maintained unless there are critical bugs! Click to switch to the 4.x branch

[!TIP] Paid services are officially launched! If you don’t want to do it yourself but want to remove TS or other modules, try the lazy package! Click to check it out

[!NOTE] If you have mobile web app requirements, give the new open-source template MobVue a try.

Usage

<details> <summary>Recommended Environment</summary> <br>

Latest version of Visual Studio Code or AI IDE Cursor and Trae
Install the recommended plugins in the .vscode/extensions.json file
node 20.19+ or 22.12+
pnpm 10+

</details> <details> <summary>Local Development</summary> <br>

# Clone the project
git clone https://github.com/un-pany/v3-admin-vite.git

# Enter the project directory
cd v3-admin-vite

# Install dependencies
pnpm i

# Start the development server
pnpm dev

</details> <details> <summary>Build</summary> <br>

# Build for the staging environment
pnpm build:staging

# Build for the production environment
pnpm build

</details> <details> <summary>Local Preview</summary> <br>

# Execute the build command first to generate the dist directory, then run the preview command
pnpm preview

</details> <details> <summary>Code Check</summary> <br>

# Code linting and formatting
pnpm lint

# Unit tests
pnpm test

</details> <details> <summary>Commit Guidelines</summary> <br>

feat New feature

fix Bug fix

perf Performance improvement

refactor Code refactoring

docs Documentation and comments

types Type-related changes

test Unit tests related

ci Continuous integration, workflows

revert Revert changes

chore Chores (update dependencies, modify configurations, etc)

</details>

Links

Online Preview: github-pages

Chinese Documentation: link

Zero to Hero Tutorial: link

Mobile Web App: mobvue

Electron Desktop Version: v3-electron-vite

Chinese Repository: gitee, atomgit

Optional Group: check how to join

Donations: buy a coffee for the author

Releases & Changelog: releases

Features

Simplified structure: No complex encapsulation, no complicated type gymnastics, just enough to meet the needs

Detailed comments: Every configuration item comes with as detailed comments as possible

Latest dependencies: Keeps all third-party dependencies up to date

Consistency: Unified code style, naming conventions, and comment style

Built-in Features

User Management: Login, logout demonstration

Permission Management: Page-level permissions (dynamic routing), button-level permissions (permission directives, permission functions), route guards

Multiple Environments: Development, staging, and production environments

Multiple Themes: Normal, dark, and deep blue themes

Multiple Layouts: Left-side, top, and hybrid layouts

Homepage: Different dashboard pages for different users

Error Pages: 403, 404

Mobile Compatibility: Layouts compatible with mobile screen resolutions

Others: SVG sprite sheet, dynamic sidebar, dynamic breadcrumbs, tab navigation, content zoom and fullscreen, composable functions

Tech Stack

Vue3: Vue3 + script setup with the latest Vue3 Composition API

Element Plus: The Vue3 version of Element UI

Pinia: The legendary Vuex5

Vite: Really fast

Vue Router: The routing system

TypeScript: A superset of JavaScript

pnpm: A faster, disk-space-saving package manager

Scss: Consistent with Element Plus

CSS Variables: Primarily controls layout and color in the project

ESLint: Code linting and formatting

Axios: Sends network requests

UnoCSS: A high-performance, flexible atomic CSS engine

Project Preview Image

preview

Contributors

A big thank you to all the contributors!

‌WeChat Official Account‌

New attempts, welcome to follow

un-pany / v3-admin-vite

AI Architecture Analysis

Embed this Badge

Repository Summary (README)