1. Project Overview

vue3-element-admin

vue3-element-admin is a free, open-source front-end template for back-office management, built with mainstream technology stacks such as Vue3 + Vite5 + TypeScript5 + Element-Plus + Pinia, with accompanying Java backend source code.

2. Open Source License

Licensed under MIT

3. Screenshots

Project Preview

4. Feature Overview

Project Features

• Simple and Easy to Use: A Vue3 version upgraded from vue-element-admin, with no excessive abstraction or transitional wrappers, making it easy to get started.

• Data Integration: Supports both local Mock and online APIs, with accompanying Java backend source code and online API documentation.

• Permission Management: Comprehensive permission system covering users, roles, menus, dictionaries, departments, and more.

• Infrastructure: Dynamic routing, button-level permissions, internationalization, coding standards, Git commit conventions, and reusable common components.

• Continuous Updates: The project is continuously maintained and updated as open source, with tools and dependencies kept up to date.

5. Tech Stack

Environment Preparation

Project Startup

# Clone the Repository
Visit Yifei Open Source: https://code.exmay.com/ Download

# Switch Directory
cd vue3-element-admin

# Install pnpm
npm install pnpm -g

# Configure the Mirror Source (Optional)
pnpm config set registry https://registry.npmmirror.com

# Install dependencies
pnpm install

# Start the Application
pnpm run dev

Project Deployment

# Build the Project
pnpm run build

# Upload Files to the Remote Server
Copy all files from the locally generated dist directory to the /usr/share/nginx/html directory on the server.

# 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/ {
            # Replace vapi.youlai.tech with the backend API address, making sure to retain the trailing slash /
            proxy_pass http://vapi.youlai.tech/;
  }
}

Local Mock

The project supports both online and local Mock APIs. Online APIs are used by default. To switch to Mock APIs, simply set VITE_MOCK_DEV_SERVER to true in the .env.development file. 

Backend API

If you have a basic understanding of Java development, follow the steps below to switch from online APIs to local backend APIs and create an enterprise-level front-end and back-end separated development environment to help you become a full-stack developer.

1. Obtain the youlai-boot backend source code developed using Java and SpringBoot.

2. Follow the README.md documentation in the backend project to complete the local setup and startup.

3. Modify the value of VITE_APP_API_URL in the .env.development file, changing it from [http://vapi.youlai.tech](http://vapi.youlai.tech) to http://localhost:8989.

More content, please refer to README.md document