基 vue-element-admin升级的Vue3 +TS +Element-
vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案，是 有来技术团队 继 youlai-mall 全栈开源商城项目的又一开源力作。
项目使用 Vue3 + Vite2 + TypeScript + Element-Plus + Vue Router + 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/ Element Plus 基于 Vue 3，面向设计师和开发者的组件库 https://element-plus.gitee.io/zh-CN/ Pinia 新一代状态管理工具 https://pinia.vuejs.org/ Vue Router Vue.js 的官方路由 https://router.vuejs.org/zh/ wangEditor Typescript 开发的 Web 富文本编辑器 https://www.wangeditor.com/ Echarts 一个基于 JavaScript 的开源可视化图表库 https://echarts.apache.org/zh/ 首先说下为什么会有此开源项目：
vue-element-admin 过于优秀，但可惜不更新了，停滞在 Vue2 版本 ；
场面上基于 Vue3 + Element Plus 组合的框架封装复杂，后端接入困难，和 vue-element-admin 相差甚远；
新技术栈、新特性支持不够，举例 TypeScript 、Vue3.2 的 setup 语法糖；
开源项目不稳定，很好的项目悄无声息的不更新了，所以团队想把管理前端掌握在自己手里。
开始为了给有来商城的管理前端找到合适的 Vue3 升级的替代方案，花了不少时间去研究市面对应的开源框架，尝试过接入有来商城线上微服务接口，但结果都不尽人意，很大部分原因是接入的复杂程度远远大于当初接入 vue-element-admin ，也不排除是先入为主的原因。但接入 vue-element-admin 确实是很轻松的，有兴趣的可以了解下接入过程:
vue-element-admin实战 | 第一篇：移除mock接入后台微服务接口
vue-element-admin实战 | 第二篇：最小改动接入后台实现动态路由菜单加载
因为相信大多数同学在 Vue2 学习阶段同时学习了 vue-element-admin 这款优秀的开源框架，但随着时间的脚步也都慢慢被卷入 Vue3 + TypeScript 的学习浪潮，前端技术栈更新迭代太快让人直呼学不动了，为了减少大家学习成本，便基于 vue-element-admin 升级改造适配当前 Vue3 生态技术栈的 vue3-element-admin，站在巨人的肩膀不仅是为了看的更远，更多的是一种致敬、延续和希望走的更远。
在线预览地址：www.youlai.tech
以下截图是来自有来商城管理前端 mall-admin-web ，是基于 vue3-element-admin 为基础开发的具有一套完整的系统权限管理的商城管理系统，数据均为线上真实的而非Mock。
首页控制台
结构样式基本遵循 vue-element-admin ， 首页模块均已做组件封装，可简单的实现替换。
国际化
已实现 Element Plus 组件和菜单路由的国际化，不过只做了少量国际化工作，国际化大部分是体力活，如果你有国际化的需求，会在下文从0到1实现Element Plus组件和菜单路由的国际化。
主题设置
大小切换
角色管理
菜单管理
商品上架
库存设置
微信小程序/ APP/ H5 显示上架商品效果
项目启动 浏览器访问 http://localhost:3000
项目部署 生成的静态文件在工程根目录 dist 文件夹
大家在整合第三方插件的时候一定要注意版本，不同版本的插件整合会有区别
1. 运行环境Node
2. 开发工具VSCode
下载地址：https://code.visualstudio.com/Download
3. 必装插件Volar
VSCode 插件市场搜索 Volar (就排在第一位的骷髅头)，且要禁用默认的 Vetur.
1. Vite 是什么？
2. 初始化项目
vue3-element-admin：项目名称
vue-ts : Vue + TypeScript 的模板，除此还有vue，react，react-ts模板
3. 启动项目
浏览器访问: http://localhost:3000
?
1.本地安装Element Plus和图标组件
2.全局注册组件
3. 页面使用 Element Plus 组件和图标
4. 效果预览
使用 @ 代替 src
1. Vite配置
2. 安装@types/node
编译器报错：TS2307: Cannot find module 'path' or its corresponding type declarations.
本地安装 Node 的 TypeScript 类型描述文件即可解决编译器报错
3. TypeScript 编译配置
4.别名使用
官方教程: https://cn.vitejs.dev/guide/env-and-mode.html
1. env配置文件
项目根目录分别添加 开发、生产和模拟环境配置
开发环境配置：.env.development
生产环境配置：.env.production
模拟生产环境配置：.env.staging
2.环境变量智能提示
添加环境变量类型声明
后面在使用自定义环境变量就会有智能提示，环境变量使用请参考下一节。
1. 跨域原理
浏览器同源策略: 协议、域名和端口都相同是同源，浏览器会限制非同源请求读取响应结果。
解决浏览器跨域限制大体分为后端和前端两个方向：
后端：开启 CORS 资源共享； 前端：使用反向代理欺骗浏览器误认为是同源请求； 2. 前端反向代理解决跨域
Vite 配置反向代理解决跨域，因为需要读取环境变量，故写法和上文的出入较大，这里贴出完整的 vite.config.ts 配置。
官方教程： https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md
Element Plus 图标库往往满足不了实际开发需求，可以引用和使用第三方例如 iconfont 的图标，本节通过整合 vite-plugin-svg-icons 插件使用第三方图标库。
1. 安装 vite-plugin-svg-icons
2. 创建图标文件夹
3. main.ts 注册脚本
4. vite.config.ts 插件配置
5. 组件封装
6. 使用案例
Pinia 是 Vue.js 的轻量级状态管理库，Vuex 的替代方案。
尤雨溪于2021.11.24 在 Twitter 上宣布：Pinia 正式成为 vuejs 官方的状态库，意味着 Pinia 就是 Vuex 5 。
1. 安装Pinia
2. Pinia全局注册
3. Pinia模块封装
4. 使用Pinia
1. axios工具封装
2. API封装
以登录成功后获取用户信息(昵称、头像、角色集合和权限集合)的接口为案例，演示如何通过封装的 axios 工具类请求后端接口，其中响应数据
3. API调用
官方文档： https://router.vuejs.org/zh/api/
1. 安装 vue-router
2. 创建路由实例
创建路由实例并导出，其中包括静态路由数据，动态路由后面将通过接口从后端获取并整合用户角色的权限控制。
3. 路由实例全局注册
4. 动态权限路由
其中 是根据用户角色获取拥有权限的路由(静态路由+动态路由)，核心代码如下：
1. Directive 自定义指令
2. 自定义指令全局注册
3. 指令使用
官方教程：https://element-plus.gitee.io/zh-CN/guide/i18n.html
Element Plus 官方提供全局配置 Config Provider实现国际化
i18n 英文全拼 internationalization ,国际化的意思，英文 i 和 n 中间18个英文字母
1. 安装 vue-i18n
2. 语言包
创建 src/lang 语言包目录，中文语言包 zh-cn.ts，英文语言包 en.ts
3. 创建i18n实例
4. i18n 全局注册
5. 静态页面国际化
$t 是 i18n 提供的根据 key 从语言包翻译对应的 value 方法
6. 动态路由国际化
i18n 工具类，主要使用 i18n 的 te (判断语言包是否存在key) 和 t (翻译) 两个方法
页面使用
推荐教程：50 行代码 Vue3 中使用 wangEditor 富文本编辑器
1. 安装wangEditor和Vue3组件
2. wangEditor组件封装
3. 使用案例
1. 安装 Echarts
2. Echarts 自适应大小工具类
侧边栏、浏览器窗口大小切换都会触发图表的 resize() 方法来进行自适应
3. Echarts使用
官方示例： https://echarts.apache.org/examples/zh/index.html
官方的示例文档丰富和详细，且涵盖了 JavaScript 和 TypeScript 版本，使用非常简单。
Gitee Github vue3-element-admin https://gitee.com/youlaiorg/vue3-element-admin https://github.com/youlaitech/vue3-element-admin 如果有问题或有好的建议可以添加开发者微信，备注「有来」进入学习交流群，备注「无回」参与开发。
开发人员
开发人员
