vue3-element-admin是基于vue-element-admin升级的Vue3+ElementPlus版本的后台管理框架，是有来技术团队继youlai-mall开源全栈商城项目的又一开源力作。

项目使用Vue3+Vite2+TypeScript+ElementPlus+VueRouter+Pinia+Volar等前端主流技术栈，基于此项目模板完成有来商城管理前端的Vue3版本。

本篇先对本项目功能、技术栈进行整体概述，再细节的讲述从0到1搭建vue3-element-admin，在希望大家对本项目有个完完整整整了解的同时也能够在学Vue3+TypeScript等技术栈少花些时间，少走些弯路，这样团队在毫无保留开源才有些许意义。

功能清单

技术栈清单技术栈描述官网Vue3渐进式JavaScript框架https://v3.cn.vuejs.org/TypeScript微软新推出的一种语言，是JavaScript的超集https://www.tslang.cn/Vite2前端开发与构建工具https://cn.vitejs.dev/ElementPlus基于Vue3，面向设计师和开发者的组件库https://element-plus.gitee.io/zh-CN/Pinia新一代状态管理工具https://pinia.vuejs.org/VueRouterVue.js的官方路由https://router.vuejs.org/zh/wangEditorTypescript开发的Web富文本编辑器https://www.wangeditor.com/Echarts一个基于JavaScript的开源可视化图表库https://echarts.apache.org/zh/环境准备安装Node

版本：16+

开发工具

VSCode

必装插件

VueLanguageFeatures(Volar)TypeScriptVuePlugin(Volar)项目启动npminstallnpmrundev访问 https://localhost:3000项目部署本地打包

npmrunbuild:prod 生成的静态文件位于项目根目录dist文件夹下

上传文件

创建 /usr/local/nginx/html/vue3 目录，将打包生成dist的所有文件拷贝至此工作目录下

nginx.cofig配置

server{listen80;server_namelocalhost;location/{root/usr/local/nginx/html/vue3;indexindex.htmlindex.htm;}#代理转发请求至网关，prod-api标识解决跨域问题#vapi.youlai.tech线上接口地址location/prod-api/{proxy_passhttps://vapi.youlai.tech/;}}本地接口如果你了解一点Java后端SpringBoot，可轻松在本地搭建接口环境.

访问后端项目仓库地址：https://gitee.com/youlaiorg/youlai-boot.git

根据项目说明文档 README.md 的描述完成数据库的创建和后端工程的启动；

进入 vite.config.ts 文件修改代理线上接口地址 https://vapi.youlai.tech 为本地接口地址 https://localhost:8989 即可。