中文| English

👀 Live Preview | 📖 Read Documentation

Introduction

vue3-element-admin is a free and open-source admin template for backend management frontend, built with popular technologies such as Vue3, Vite5, TypeScript, Element-Plus, and Pinia (with accompanying backend source code).

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 both local Mock data and remote API. Comes with Java backend source code and online API documentation.

• Permission Management: Complete permission system for users, roles, menus, dictionaries, and departments.

• Essential Infrastructure: Dynamic routing, button permissions, internationalization, code style, Git commit conventions, and common component encapsulation.

• Continuous Updates: Continuously updated for 3 years since 2021, keeping up with the latest technologies and tools.

Project Preview

Project Links

Project	Gitee	Github	GitCode
Frontend	vue3-element-admin	vue3-element-admin	vue3-element-admin
Backend	youlai-boot	youlai-boot	youlai-boot

Environment Setup

Environment	Name and Version	Download Link
Development Tool	VSCode	Download
Runtime Environment	Node ≥18	Download

Project Setup

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

# Change directory
cd vue3-element-admin

# Install pnpm
npm install pnpm -g

# Install dependencies
pnpm install

# Start the project
pnpm run dev

Project Deployment

# Build the project
pnpm run build:prod

# Upload files to the remote server
Copy the files generated in the `dist` directory to the `/usr/share/nginx/html` directory.

# nginx.cofig configuration
server {
	listen     80;
	server_name  localhost;
	location / {
			root /usr/share/nginx/html;
			index index.html index.htm;
	}
	# Reverse proxy configuration
	location /prod-api/ {
			proxy_pass http://vapi.youlai.tech/; # Replace vapi.youlai.tech with your backend API address
	}
}

Local Mock

The project supports both online API and local mock API. By default, it uses the online API. If you want to switch to the mock API, modify the value of VITE_MOCK_DEV_SERVER 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 set up a full-stack development environment.

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 the local environment.
3. Modify the value of VITE_APP_API_URL in the .env.development file to http://localhost:8989, replacing it with the backend API URL.

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 ?..

• 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.

Project Documentation

• Building a Backend Management System from Scratch with Vue3, Vite, TypeScript, and Element-Plus

• ESLint+Prettier+Stylelint+EditorConfig for Standardized and Unified Frontend Code Style

• Git Commit Conventions with Husky, Lint-staged, Commitlint, Commitizen, and cz-git

Commit Conventions

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

Community 🚀

Follow "Youlai Tech" WeChat Official Account to get the QR code for the community.

If the QR code for the community has expired, please add my WeChat (haoxianrui) and indicate whether you are interested in "Frontend", "Backend", or "Full Stack" to get the latest QR code.

This measure is taken to ensure the quality of the community and prevent marketing advertising from infiltrating. Thank you for your understanding!

Official Account	Community