☀️ A crafted admin template / vue admin, vue template, vue3 admin, vue3 template, vue 后台, vue 模板, vue3 后台, vue3 模板
V3 Admin Vite
English | 中文
Introduction
V3 Admin Vite is a well-crafted backend management system template, built with popular technologies such as Vue3, Vite, TypeScript, and Element Plus
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
[!TIP]
If you have mobile web app needs, try the new open-source template. MobVue
Usage
Recommended Environment
- Latest version of
Visual Studio Code - Install the recommended plugins in the
.vscode/extensions.jsonfile node20.x or 22+pnpm9.x or 10+
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
Mobile Web App: mobvue
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 (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
Contributors
A big thank you to all the contributors!