Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/un-pany/v3-admin-vite

☀️ A crafted admin template「vue admin / vue template / vue3 admin / vue3 template / 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: 5 days ago
JSON representation

☀️ A crafted admin template「vue admin / vue template / vue3 admin / vue3 template / vue3 后台 / vue3 模板」

Awesome Lists containing this project

README 

        


  logo

  
V3 Admin Vite





[![github release](https://img.shields.io/github/v/release/un-pany/v3-admin-vite?style=flat)](https://github.com/un-pany/v3-admin-vite/releases)

[![github stars](https://img.shields.io/github/stars/un-pany/v3-admin-vite?style=flat)](https://github.com/un-pany/v3-admin-vite/stargazers)

[![gitee stars](https://gitee.com/un-pany/v3-admin-vite/badge/star.svg)](https://gitee.com/un-pany/v3-admin-vite/stargazers)



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](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)



## 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







```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)



**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 (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



![preview](./src/common/assets/images/docs/preview.png)



## Contributors



A big thank you to all the contributors!





  




## License



[MIT](./LICENSE) License © 2022-PRESENT [pany](https://github.com/pany-ang)