https://github.com/un-pany/v3-admin-vite
☀️ A crafted admin template / vue admin, vue template, vue3 admin, vue3 template, vue 后台, vue 模板, vue3 后台, vue3 模板
https://github.com/un-pany/v3-admin-vite
admin axios element-plus eslint pinia pnpm sass template typescript vite vue vue-router
Last synced: 6 days ago
JSON representation
☀️ A crafted admin template / vue admin, vue template, vue3 admin, vue3 template, vue 后台, vue 模板, vue3 后台, vue3 模板
- Host: GitHub
- URL: https://github.com/un-pany/v3-admin-vite
- Owner: un-pany
- License: mit
- Created: 2022-04-20T14:29:26.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-27T08:26:24.000Z (19 days ago)
- Last Synced: 2025-04-02T01:21:07.718Z (13 days ago)
- Topics: admin, axios, element-plus, eslint, pinia, pnpm, sass, template, typescript, vite, vue, vue-router
- Language: Vue
- Homepage: https://un-pany.github.io/v3-admin-vite/
- Size: 45.6 MB
- Stars: 5,986
- Watchers: 38
- Forks: 1,013
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-element-plus - v3-admin-vite - ☀️ A vue3 admin template. [👓](https://un-pany.github.io/v3-admin-vite) (Templates / Starter Template)
- awesome-element-plus - v3-admin-vite - ☀️ A vue3 admin template. [👓](https://un-pany.github.io/v3-admin-vite) (Templates / Starter Template)
README
V3 Admin Vite
[](https://github.com/un-pany/v3-admin-vite/releases)
[](https://github.com/un-pany/v3-admin-vite/stargazers)
[](https://gitee.com/un-pany/v3-admin-vite/stargazers)
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](https://github.com/un-pany/v3-admin-vite/tree/4.x)
> [!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](https://github.com/un-pany/v3-admin-vite/issues/225)
> [!TIP]
> If you have mobile web app needs, try the new open-source template. [MobVue](https://github.com/un-pany/mobvue)
## 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.x or 10+
Local Development
```bash
# 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
```bash
# Build for the staging environment
pnpm build:staging
# Build for the production environment
pnpm build
```
Local Preview
```bash
# Execute the build command first to generate the dist directory, then run the preview command
pnpm preview
```
Code Check
```bash
# 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](https://un-pany.github.io/v3-admin-vite)
**Chinese Documentation**: [link](https://juejin.cn/post/7089377403717287972)
**Zero to Hero Tutorial**: [link](https://juejin.cn/column/7207659644487139387)
**Mobile Web App**: [mobvue](https://github.com/un-pany/mobvue)
**Electron Desktop Version**: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
**Chinese Repository**: [gitee](https://gitee.com/un-pany/v3-admin-vite)
**Optional Group**: [check how to join](https://github.com/un-pany/v3-admin-vite/issues/191)
**Donations**: [buy a coffee for the author](https://github.com/un-pany/v3-admin-vite/issues/69)
**Releases & Changelog**: [releases](https://github.com/un-pany/v3-admin-vite/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!
## License
[MIT](./LICENSE) License © 2022-PRESENT [pany](https://github.com/pany-ang)