V3 Admin Vite

English | 中文

Introduction

V3 Admin Vite is a free and open-source foundational solution for backend management systems, based on popular technologies such as Vue3, Vite, TypeScript, Element Plus, and others

Notifications

Note

Powered by love! All source code is free and open-source. If you find it helpful, feel free to give a star to support!

Important

Welcome to experience the brand-new version 5.0, currently in the beta stage. It will be a masterpiece!

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

Usage

Recommended Environment

• Latest version of Visual Studio Code
• Install the recommended plugins in the .vscode/extensions.json file
• node 20.x or 22+
• pnpm 9+

Local Development

# 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

Build

# Build for the staging environment
pnpm build:staging

# Build for the production environment
pnpm build

Local Preview

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

Code Check

# Code linting and formatting
pnpm lint

# Unit tests
pnpm test

Commit Guidelines

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)

Links

Online Preview：github-pages

Chinese Documentation：link

Zero to Hero Tutorial：link

Electron Desktop Version: v3-electron-vite

Chinese Repository：gitee

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 (directive permissions, 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

Contributors

A big thank you to all the contributors!

License

MIT License © 2022-PRESENT pany