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

  VSCode

• 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标识解决跨域问题
      # vapi.youlai.tech 线上接口地址
      location /prod-api/ {
          proxy_pass http://vapi.youlai.tech/;
      }
  }
  

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:https://gitee.com/youlaiorg/youlai-boot.git

2. According to the project documentation README.md 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 http://vapi.youlai.tech local interface address http://localhost:8989 That’s it.