关注过我的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/…