vue3-element-admin
**Vue3 + Vite + TypeScript Enterprise Admin Frontend**
[](https://vuejs.org/)
[](https://element-plus.org/)
[](https://gitee.com/youlaiorg/vue3-element-admin/stargazers)
[](https://github.com/youlaitech/vue3-element-admin)
[](https://gitcode.com/youlai/vue3-element-admin/stargazers)
[](LICENSE)
[](https://vue.youlai.tech)
[](https://app.youlai.tech)
[](https://www.youlai.tech/docs/web/)
[](https://www.youlai.tech/docs/web/)
[](./README.md)
## Introduction
[vue3-element-admin](https://gitcode.com/youlai/vue3-element-admin) is an enterprise-level admin frontend built with Vue 3, Vite, TypeScript, and Element Plus, paired with [9 mainstream backends + derivatives](#ecosystem) (covering Java / Node.js / Go / Python / PHP / C# / Rust 7 languages) and the mobile app [youlai-app](https://gitee.com/youlaiorg/youlai-app). Other frontend versions: [JavaScript](https://gitee.com/youlaiorg/vue3-element-admin-js) · [Lite](https://gitee.com/youlaiorg/vue3-element-template) · [NaiveUI](https://gitee.com/youlaiorg/vue3-naiveui-admin).
## Project Features
- **Simple and Easy-to-use** — A Vue3 upgrade of [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) with no over-encapsulation, easy to get started.
- **Permission System** — Dynamic routing, button permissions, role permissions, and data permissions.
- **Multi-tenant** — Supports multi-tenant mode and tenant isolation.
- **Infrastructure** — Internationalization, multiple layouts, dark mode, full screen, watermark, API documentation, and code generator.
- **Data Interaction** — Supports Mock data and online API documentation, with accompanying Java / Node backend source code.
- **Continuous Updates** — The project is continuously open-sourced and updated, keeping pace with the mainstream tech stack.
## System Preview
**PC**
**Mobile**
## Quick Start
**Environment Requirements**: Node.js `^20.19.0` or `>=22.12.0` · pnpm `>=8.0.0`
| Environment Type | Version Requirement | Notes |
| -------- | -------- | ---- |
| **Node.js** | `^20.19.0` or `>=22.12.0` | LTS is recommended (even major versions) |
| **Package Manager** | `pnpm >= 8.0.0` | This project uses pnpm as the package manager |
| **IDE** | [Visual Studio Code](https://code.visualstudio.com/Download) | Vue and TypeScript extensions recommended |
```bash
# Clone repository
git clone https://gitee.com/youlaiorg/vue3-element-admin.git
cd vue3-element-admin
# Install pnpm (skip if already installed)
npm install pnpm -g
# Set mirror source (optional)
pnpm config set registry https://registry.npmmirror.com
# Install dependencies
pnpm install
# Start development server
pnpm run dev
```
After starting, visit http://localhost:3000 and log in with `admin` / `123456`.
> For more, see the official docs: [Quick Start](https://www.youlai.tech/docs/web/) · [Deployment Guide](https://www.youlai.tech/docs/web/deployment/deploy.html)
## AI Programming
This project ships with an [Agent Skill](https://skills.sh/youlaitech/youlai-skills). Once installed, the AI coding assistant automatically follows this project's Vue3 development conventions (naming, directory structure, BEM + UnoCSS, component and API conventions). It supports 70+ agents including CodeBuddy, Claude Code, Cursor, Codex, and GitHub Copilot.
```bash
npx skills add https://github.com/youlaitech/youlai-skills --skill vue
```
## Ecosystem Matrix
**Frontend**
| Project | Tech Stack | Description | Status |
|:-----|:-------|:-----|:---------|
| [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | Vue 3 + Vite + TS + Element Plus | PC Admin (Main) | ✅️ |
| [vue3-element-admin-js](https://gitee.com/youlaiorg/vue3-element-admin-js) | Vue 3 + Vite + JS + Element Plus | JavaScript Version | ✅️ |
| [vue3-element-template](https://gitee.com/youlaiorg/vue3-element-template) | Vue 3 + Vite + TS + Element Plus | Lite Template | ✅️ |
| [vue3-naiveui-admin](https://gitee.com/youlaiorg/vue3-naiveui-admin) | Vue 3 + Vite + TS + Naive UI | Naive UI Version | ✅️ |
| [youlai-app](https://gitee.com/youlaiorg/youlai-app) | Vue 3 + UniApp | Mobile App | ✅️ |
**Backend**
| Project | Tech Stack | Description | Status |
|:-----|:-------|:-----|:---------|
| [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) | Spring Boot + MyBatis-Plus | Java (Main) | ✅️ |
| [youlai-nest](https://gitee.com/youlaiorg/youlai-nest) | NestJS + TypeORM | Node.js | ✅️ |
| [youlai-gin](https://gitee.com/youlaiorg/youlai-gin) | Go + Gorm | Go | ✅️ |
| [youlai-django](https://gitee.com/youlaiorg/youlai-django) | Django + DRF | Python | ✅️ |
| [youlai-fastapi](https://gitee.com/youlaiorg/youlai-fastapi) | FastAPI + SQLAlchemy | Python | ✅️ |
| [youlai-laravel](https://gitee.com/youlaiorg/youlai-laravel) | Laravel + Eloquent | PHP | ✅️ |
| [youlai-think](https://gitee.com/youlaiorg/youlai-think) | ThinkPHP + ThinkORM | PHP | ✅️ |
| [youlai-aspnet](https://gitee.com/youlaiorg/youlai-aspnet) | ASP.NET Core + EF Core | C# | ✅️ |
| [youlai-axum](https://gitee.com/youlaiorg/youlai-axum) | Axum + SeaORM | Rust | ✅️ |
> All nine backends share the same **RESTful API** and **database schema**, frontends can switch seamlessly.
**Derivatives**
| Project | Based On | Type | Description | Status |
|:-----|:-----|:-----|:-----|:---------|
| [youlai-boot-tenant](https://gitee.com/youlaiorg/youlai-boot-tenant) | youlai-boot | Repo | Multi-tenant SaaS, tenant isolation and tenant config | ✅️ |
| [youlai-nest (multi-tenant)](https://gitee.com/youlaiorg/youlai-nest/tree/multi-tenant) | youlai-nest | Branch | Multi-tenant SaaS, tenant isolation and tenant config | ✅️ |
| [youlai-boot-flex](https://gitee.com/youlaiorg/youlai-boot-flex) | youlai-boot | Repo | Switched to MyBatis-Flex | ✅️ |
| [youlai-boot (db-pg)](https://gitee.com/youlaiorg/youlai-boot/tree/db-pg) | youlai-boot | Branch | PostgreSQL database branch | ✅️ |
| [youlai-boot (multi-module)](https://gitee.com/youlaiorg/youlai-boot/tree/multi-module) | youlai-boot | Branch | Multi-module project split | ✅️ |
| [youlai-boot (spring-boot-3)](https://gitee.com/youlaiorg/youlai-boot/tree/spring-boot-3) | youlai-boot | Branch | Spring Boot 3 compatible branch | ✅️ |
## Development Guide
| Name | Link |
| -------- | -------- |
| Video Tutorial | [https://www.bilibili.com/video/BV1eFUuYyEFj](https://www.bilibili.com/video/BV1eFUuYyEFj) |
| Project Setup | [Building a Backend Management System from Scratch with Vue3, Vite, TypeScript, and Element-Plus](https://blog.csdn.net/u013737132/article/details/130191394) |
| Official Documentation | [https://www.youlai.tech/docs/web/](https://www.youlai.tech/docs/web/) |
| Deployment Guide | [https://www.youlai.tech/docs/web/deployment/deploy.html](https://www.youlai.tech/docs/web/deployment/deploy.html) |
| FAQ | [https://www.youlai.tech/docs/faq/](https://www.youlai.tech/docs/faq/) |
| Code Standards | [ESLint V9 + Prettier + Stylelint + EditorConfig for Standardized and Unified Frontend Code Style](https://youlai.blog.csdn.net/article/details/145608723) |
| Commit Standards | [Husky + Lint-staged + Commitlint + Commitizen + cz-git for Git Commit Standards](https://youlai.blog.csdn.net/article/details/145615236) |
| API Documentation | [https://www.apifox.cn](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5) |
## Project Deployment
Run `pnpm run build` to bundle and generate the `dist` directory, upload it to the server and configure Nginx reverse proxy.
```bash
pnpm run build
```
For the detailed deployment flow (Nginx config, reverse proxy, HTTPS, etc.), see the [Deployment Guide](https://www.youlai.tech/docs/web/deployment/deploy.html).
## Data Interface
The frontend uses the online API by default, and can also switch to local Mock or connect to a local backend.
**Local Mock**: Set `VITE_MOCK_DEV_SERVER` in `.env.development` to `true` to enable local Mock interfaces, allowing standalone development without a backend.
**Connect to Backend**: All nine backends use the default port `8000`. Change `VITE_APP_API_URL` in `.env.development` to `http://localhost:8000` and start the corresponding backend (the recommended Java backend is [youlai-boot](https://gitee.com/youlaiorg/youlai-boot.git); see each repo's README for the rest).
## Commit Conventions
Run `pnpm run commit` to invoke the interactive git commit and complete the information input and selection according to the prompts.
## Technical Cooperation
This project is open-sourced under the [MIT](LICENSE) license and free for commercial use. Feel free to submit issues or feedback in [Issue](https://gitee.com/youlaiorg/vue3-element-admin/issues), and pull requests in [Pull Request](https://gitee.com/youlaiorg/vue3-element-admin/pulls) are also welcome. For technical support, business cooperation, secondary development, or project customization, contact the author via WeChat (see QR code below).
WeChat Official Account
|
|
Mini Program
|
|
Add Author WeChat
|
Technical Exchange · Issue Feedback · Business Cooperation
