vue3-element-admin is the background management framework of Vue3 + Element Plus version upgraded based on vue-element-admin.

The project uses Vue3 + Vite2 + TypeScript + Element Plus + Vue Router + Pinia + Volar and other front-end mainstream technology stacks. Based on this project template, the Vue3 version of the mall management front-end is completed.

This article first gives an overall overview of the project’s functions and technology stack, and then details how to build vue3-element-admin from 0 to 1. I hope that everyone can have a complete understanding of this project and learn Vue3 + TypeScript and other technology stacks Spend less time and take less detours, so that the team has some meaning in open source without reservation.

function list


technology stack list

Environmental preparation

  • Install Node

    Version: 16+

  • development tools


  • Required plug-ins

    • Vue Language Features (Vollar)
    • TypeScript Vue Plugin (Vollar)

Project begining

  1. npm install
  2. npm run dev
  3. access http://localhost:3000

project deployment

  • local packaging

    The generated static files are located in the dist folder of the project root directory

  • upload files

    create /usr/local/nginx/html/vue3 directory, copy all the files packaged to generate dist to this working directory

  • nginx.config configuration

    server {
        listen     80;
        server_name  localhost;
        location / {
            root /usr/local/nginx/html/vue3;
            index index.html index.htm;
        # 代理转发请求至网关,prod-api标识解决跨域问题
        # 线上接口地址
        location /prod-api/ {

local interface

If you know a little about the Java backend SpringBoot, you can easily build an interface environment locally.

  1. Access the backend project warehouse address:

  2. According to the project documentation The description completes the creation of the database and the startup of the back-end project;

  3. Enter vite.config.ts File modification agent online interface address local interface address http://localhost:8989 That’s it.

#vue3elementadmin #home #page #documentation #downloads #vue3 #version #background #management #solution #News Fast Delivery

Leave a Comment

Your email address will not be published. Required fields are marked *