vue3 element admin

🔥基于 vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板（配套后端源码），vue-element-admin 的 vue3 版本。

youlaitech
1485
386
Vue
vue3-element-admin

vue3-element-admin

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: Since 2021, the project has maintained an open-source status with continuous updates, integrating new tools and dependencies in real time, and has accumulated a broad user base.

Project Preview

Light Mode

Dark Mode

API Documentation

Project Links

Project Gitee Github GitCode
Frontend vue3-element-admin vue3-element-admin vue3-element-admin
Lite vue3-element-template vue3-element-template -
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

# 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

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
Youlai Tech WeChat Official Account QR Code Community QR Code