关注过我的mall项目的小伙伴应该有所了解，mall项目的后台管理系统一直都是Vue2版本的，主要原因是项目从Vue2升级到Vue3基本等于要重写了。 最近我花了一个月的时间，将mall项目的后台管理系统升级到了Vue3版本，今天和大家聊聊做了哪些升级！
项目介绍
mall-admin-web是mall电商项目后台管理系统的前端项目，基于Vue3+Element-Plus实现。主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。
下面是mall-admin-web项目运行的效果图，界面还是很清新优雅的！如果你想体验完整功能的话，可以访问这个在线演示地址：www.macrozheng.com/admin/
技术栈
mall-admin-web技术栈已经全面升级，基于目前主流的前端技术栈，版本也是比较新的，具体技术栈如下。
| 技术 | 说明 | 版本 |
|---|---|---|
| Vue | 前端框架 | 3.5.25 |
| Element Plus | 前端UI框架 | 2.12.0 |
| Vue Router | 路由框架 | 4.6.3 |
| Pinia | 全局状态管理框架 | 3.0.4 |
| Pinia Plugin Persistedstate | Pinia持久化插件 | 4.7.1 |
| Axios | 前端HTTP框架 | 1.13.2 |
| Vue-charts | 基于Echarts的图表框架 | 8.0.1 |
| TinyMCE Vue | 富文本编辑器 | 5.1.1 |
| Js-cookie | cookie管理工具 | 3.0.5 |
升级内容
这里和大家聊聊
mall-admin-web做了哪些升级！
Vue2升级Vue3
项目的Vue版本从之前的2.7.2升级到了3.5.25，改动还是挺大的，之前使用的选项式API都已经改成了Vue3的组合式API。
我在升级项目的同时，给代码添加了更加详尽的注释，方便大家来学习。
之前经常有小伙伴问接口文档在哪里，其实把后端项目运行起来，就有接口文档了，我这里给前端调用的接口方法添加了详细的注释，大家也可以直接从代码中查看接口调用。
JavaScript升级TypeScript
TypeScript我们可以把它看作是带有类型的JavaScript，JavaScript里的支持的语法，它基本都支持。
项目中对于使用到的对象添加了类型支持，用起来有点Java中对象的感觉。
这样我们在编写代码时就可以有属性提示了，使用TypeScript我们在编译时就可以发现错误，以便及时修正。
这里有两者使用的优势对比，大家可以参考下！
Element UI升级Element Plus
由于Element UI已经停止更新，这里升级到了支持Vue3的Element Plus组件库，两者使用过程中的特性与优缺点对比如下。
Vuex升级Pinia
Pinia是Vue官方开发的状态管理库，使用它API更简洁，而且完美支持Vue3和TypeScript。
项目中的用户信息存储就使用了它，配合pinia-plugin-persistedstate插件，还可以实现数据的持久化。
两者使用过程中的特性与优缺点对比如下。
v-charts升级vue-charts
之前项目中使用的图表库v-charts已经停止维护，这里升级到了vue-charts，使用该库生成的图表功能也更加强大了！
两者使用过程中的特性与优缺点对比如下。
总结
今天给大家分享了mall后台管理系统前端的升级内容，主要是项目升级到了Vue3，一些过时的库也迁移到了新的库，升级之后项目更加适合学习了，感兴趣的小伙伴可以学习下！
项目地址
- Github：github.com/macrozheng/...
- Gitee：gitee.com/macrozheng/...