vue-vben-admin

A modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!

33,123 stars Vue Markdown Skills API Spec #admin-template#ant-design#element-plus#monorepo
AI Prompts & Specs

Repository: vbenjs/vue-vben-admin


Stars: 32115

README.md

<div align="center">
<a href="https://github.com/anncwb/vue-vben-admin">
<img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/[email protected]/source/logo-v1.webp">
</a>
<br>
<br>

![license](LICENSE)

<h1>Vue Vben Admin</h1>
</div>

![Quality Gate Status](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml)

English | 中文 | 日本語

Introduction

Vue Vben Admin is a free and open source middle and back-end template. Using the latest vue3, vite, TypeScript and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.

Upgrade Notice

This is the latest version, 5.0, and it is not compatible with previous versions. If you are starting a new project, it is recommended to use the latest version. If you wish to view the old version, please use the v2 branch.

Features

- Latest Technology Stack: Developed with cutting-edge front-end technologies like Vue 3 and Vite
- TypeScript: A language for application-scale JavaScript
- Themes: Multiple theme colors available with customizable options
- Internationalization: Comprehensive built-in internationalization support
- Permissions: Built-in solution for dynamic route-based permission generation

Preview

- Vben Admin - Full version Chinese site

Test Account: vben/123456

<div align="center">
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
</div>

Use Gitpod

Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.

![Open in Gitpod](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)

Documentation

Document

Install and Use

1. Get the project code

bash
git clone https://github.com/vbenjs/vue-vben-admin.git

2. Install dependencies

bash
cd vue-vben-admin
npm i -g corepack
pnpm install

3. Run

bash
pnpm dev

4. Build

bash
pnpm build

Change Log

CHANGELOG

How to Contribute

You are very welcome to join! Raise an issue or submit a Pull Request.

Pull Request Process:

1. Fork the code
2. Create your branch: git checkout -b feat/xxxx
3. Submit your changes: git commit -am 'feat(function): add xxxxx'
4. Push your branch: git push origin feat/xxxx
5. Submit pull request

Git Contribution Submission Specification

Reference vue specification (Angular)

- feat Add new features
- fix Fix the problem/BUG
- style The code style is related and does not affect the running result
- perf Optimization/performance improvement
- refactor Refactor
- revert Undo edit
- test Test related
- docs Documentation/notes
- chore Dependency update/scaffolding configuration modification etc.
- ci Continuous integration
- types Type definition file changes

Browser Support

The Chrome 80+ browser is recommended for local development

Support modern browsers, not IE

| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /></br>Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /></br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /></br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /></br>Safari |
| :-: | :-: | :-: | :-: |
| last 2 versions | last 2 versions | last 2 versions | last 2 versions |

Maintainer

@Vben

Star History

![Star History Chart](https://star-history.com/#vbenjs/vue-vben-admin&Date)

If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!

!donate

<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aee;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>

Contributors

<a href="https://openomy.app/github/vbenjs/vue-vben-admin" target="_blank" style="display: block; width: 100%;" align="center">
<img src="https://openomy.app/svg?repo=vbenjs/vue-vben-admin&chart=bubble&latestMonth=3" target="_blank" alt="Contribution Leaderboard" style="display: block; width: 100%;" />
</a>

<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
<img alt="Contributors" src="https://contrib.rocks/image?repo=vbenjs/vue-vben-admin" />
</a>

Discord

- Github Discussions

License

MIT © Vben-2020