How We Upgraded Mall Admin Web from Vue2 to Vue3 with TypeScript

Project Overview

mall-admin-web

is the front‑end of the Mall e‑commerce admin system. It is built with Vue 3 and Element‑Plus and provides modules for product management, order management, member management, promotion, operation, content, reporting, finance, permission, and system settings.

Demo URL: https://www.macrozheng.com/admin/

Technology Stack

Vue

– Front‑end framework – 3.5.25 Element Plus – UI component library – 2.12.0 Vue Router – Routing – 4.6.3 Pinia – Global state management – 3.0.4 Pinia Plugin Persistedstate – State persistence – 4.7.1 Axios – HTTP client – 1.13.2 Vue‑charts – Chart library based on ECharts – 8.0.1 TinyMCE Vue – Rich‑text editor – 5.1.1 Js‑cookie – Cookie utility – 3.0.5

Upgrade Details

Key migration steps performed on mall-admin-web to modernize the code base.

Vue 2 → Vue 3

The core framework was upgraded from Vue 2.7.2 to Vue 3.5.25. All components were refactored from the Options API to the Composition API. Inline comments were added to illustrate the new patterns. When the back‑end service runs, its API documentation becomes available automatically, and the front‑end now contains detailed JSDoc‑style comments for each API call.

JavaScript → TypeScript

TypeScript was introduced to provide static typing. All data structures and component props now have explicit type definitions, enabling IDE autocompletion, compile‑time error checking, and a development experience similar to Java.

Element UI → Element Plus

Element UI (no longer maintained) was replaced with the Vue 3‑compatible Element Plus. The migration required updating component imports, template syntax, and style overrides. The new library offers better TypeScript support and active maintenance.

Vuex → Pinia

State management was switched from Vuex to Pinia. Pinia’s API is more concise and fully supports Vue 3 and TypeScript. User information is stored in a Pinia store and persisted across page reloads using the pinia-plugin-persistedstate plugin.

v‑charts → vue‑charts

The discontinued v‑charts library was replaced with vue‑charts, which provides a richer set of chart types and better integration with ECharts. All chart components were updated to the new API.

Conclusion

The admin front‑end has been fully modernized: Vue 3, TypeScript, Element Plus, Pinia, and vue‑charts replace legacy dependencies. This makes the code base easier to maintain, provides stronger type safety, and aligns the project with current front‑end best practices.

Project Links

GitHub: https://github.com/macrozheng/mall-admin-web

Gitee: https://gitee.com/macrozheng/mall-admin-web