Introduction

vue3-element-admin is a minimalist enterprise-level admin frontend template built with Vue3, Vite7, TypeScript, and Element-Plus. It comes with a Java backend youlai-boot, a multi-tenant Java backend youlai-boot-tenant, and a Node backend youlai-nest. A simplified version vue3-element-template and a JavaScript version vue3-element-admin-js are also available.

Project Features

• Simple and Easy-to-use: Upgraded version of vue-element-admin for Vue3, with minimal encapsulation and easy to get started.

• Data Interaction: Support for Mock data and online API documentation, with accompanying Java and Node backend source code.

• System Functions: Provides user management, role management, menu management, department management, dictionary management, and other functional modules.

• Permission Management: Supports dynamic routing, button permissions, role permissions, and data permissions.

• Multi-tenant: Supports multi-tenant mode and tenant isolation.

• Infrastructure: Provides internationalization, multiple layouts, dark mode, full screen, watermark, API documentation, and code generator functionality.

• Continuous Updates: Project is continuously updated with real-time updates of tools and dependencies.

System Preview

PC

Mobile

Ecosystem

Frontend

Project	Tech Stack	Description
vue3-element-admin	Vue 3 + Vite + TS + Element Plus	PC Admin (Main)
vue3-element-admin-js	Vue 3 + Vite + JS + Element Plus	JavaScript Version
vue3-element-template	Vue 3 + Vite + TS + Element Plus	Lite Template
youlai-app	Vue 3 + UniApp	Mobile App

Backend

Project	Tech Stack	Description
youlai-boot	Spring Boot + MyBatis-Plus	Java Backend (Main)
youlai-nest	NestJS + TypeORM	Node.js
youlai-gin	Go + Gorm	Go
youlai-django	Django + DRF	Python
youlai-think	ThinkPHP 8	PHP
youlai-aspnet	ASP.NET Core	C#

youlai-boot also provides variants: Multi-tenant · MyBatis-Flex · Spring Boot 3 · PostgreSQL · Multi-module

All six backends share the same RESTful API and database schema, frontends can switch seamlessly.

Development Guide

Name	Link
Video Tutorial	https://www.bilibili.com/video/BV1eFUuYyEFj
Project Setup	Building a Backend Management System from Scratch with Vue3, Vite, TypeScript, and Element-Plus
Official Documentation	https://www.youlai.tech/vue3-element-admin/
Code Standards	ESLint V9 + Prettier + Stylelint + EditorConfig for Standardized and Unified Frontend Code Style
Commit Standards	Husky + Lint-staged + Commitlint + Commitizen + cz-git for Git Commit Standards
API Documentation	https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5

Project Setup

• Environment Preparation

Type	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
IDE	Visual Studio Code	Recommended Vue/TypeScript extensions

• Quick Start

# Clone repository
git clone https://gitee.com/youlaiorg/vue3-element-admin.git

# Change directory
cd vue3-element-admin

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

Project Deployment

After executing the pnpm run build command, the project will be bundled and a dist directory will be generated. Next, upload the files from the dist directory to the /usr/share/nginx/html directory on your server and configure Nginx for reverse proxy.

pnpm run build

Here is an example Nginx configuration:

server {
    listen      80;
    server_name localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    # Reverse proxy configuration
    location /prod-api/ {
        # Please replace api.youlai.tech with your backend API address, and keep the trailing slash /
        proxy_pass http://api.youlai.tech/;
    }
}

For more detailed information, please refer to this article: Nginx Installation and Configuration.

Local Mock

The project supports both online and local Mock interfaces. By default, it uses online interfaces. To switch to Mock interfaces, modify the VITE_MOCK_DEV_SERVER value in the .env.development file to true.

Backend API

If you have a basic understanding of Java development, follow these steps to convert online API to local backend API and create an enterprise-level full-stack development environment to help you on your full-stack journey.

1. Get the backend source code based on Java and SpringBoot from youlai-boot.
2. Follow the instructions in the backend project's README.md to set up and run locally.
3. Modify the value of VITE_APP_API_URL in the .env.development file, changing it from https://api.youlai.tech to http://localhost:8989.

Notes

• Auto import plugin is disabled by default

  Component type declarations have been automatically generated for the template project. If you add and use new components, follow the instructions in the screenshot to enable automatic generation. After automatic generation is complete, remember to set it back to false to avoid conflicts.

  

• Blank page when accessing the project

  Try upgrading your browser, as older browser engines may not support certain new JavaScript syntax, such as optional chaining operator ?..

• Project synchronization with repository updates

  After synchronizing the project with repository updates, it is recommended to run pnpm install to update dependencies before starting.

• Red highlight on project components, functions, and imports

  Restart VSCode to try again.

• Other issues

  If you have any other issues or suggestions, please open an ISSUE.

Commit Conventions

Execute pnpm run commit to invoke interactive git commit and complete the information input and selection according to the prompts.

Project Statistics

Thanks to all the contributors! 感谢所有的贡献者！

---

WeChat Official Account

Mini Program

Add Author WeChat

Technical Exchange · Issue Feedback · Business Cooperation

License

MIT