Vortmall 前端技术体系围绕后台管理系统、PC 端应用、移动端应用三大核心场景构建，基于 Vue3 生态为核心底座，结合不同场景的技术特性和业务需求，形成了分层清晰、适配性强的技术栈体系，既保证了技术架构的统一性，又兼顾了各端的专属优化。

01

PART ONE

技术架构核心原则

Vortmall 前端技术选型遵循三大核心原则：
统一底座：全端基于 Vue3 + TypeScript 构建，保障代码规范和类型安全，降低跨端开发的学习成本；
场景适配：针对后台、PC、移动端的不同交互特性、性能要求和部署场景，定制化选择构建工具、UI 库和网络方案；
工程化落地：全端接入统一的测试体系，结合现代化构建工具提升开发效率和产物质量。

02

PART TWO

各端技术栈详解

1. 后台管理系统
后台管理系统聚焦高效开发、稳定运维，适配内部运营 / 管理类场景的交互需求：
核心基座：基于 Vue3 作为基础框架，搭配 TypeScript 强类型约束，降低复杂业务逻辑的出错率；
构建与工程化：采用 Vite 作为构建工具，兼顾开发阶段的热更新速度和生产环境的打包效率；
UI 与样式：基于自研组件库 VortUI 构建统一视觉体系，覆盖表单、弹窗、反馈、导航等全场景交互组件，支持主题定制与命令式 API，Less 作为 CSS 预处理语言；
状态与路由：使用 Pinia 进行全局状态管理（替代 Vuex），Vue Router 实现路由控制，符合 Vue3 生态最佳实践；
网络与测试：Axios 处理网络请求，配套 Vitest + Vue Test Utils 完成单元测试，可结合 MSW 实现接口 Mock，保障测试覆盖率。

2. PC 端应用
PC 端面向外部用户，兼顾SEO 优化、首屏性能、交互体验，基于 Nuxt 生态构建：
核心基座：Vue3 基础框架 + Nuxt4（底层基于 Vite），利用 Nuxt 的服务端渲染（SSR）/ 静态站点生成（SSG）能力优化 SEO 和首屏加载速度；
UI 与样式：整合 Element Plus 和 Ant Design Vue 两大主流 UI 库，适配不同业务模块的交互风格，Less 作为 CSS 预处理语言；
网络请求：使用 Nuxt 内置的 $fetch / useFetch 替代 Axios，简化请求封装并适配服务端渲染场景的请求逻辑；
国际化与状态：内置 i18n 实现多语言适配，Pinia 统一管理全局状态；
测试体系：Vitest + Nuxt Test Utils + Vue Test Utils 组合，结合 happy-dom 模拟浏览器环境，覆盖单元测试和集成测试场景。

3. 移动端应用

移动端基于 uni-app 构建，聚焦跨端兼容、轻量化、原生体验：
核心基座：uni-app（Vue3 版本）作为跨端框架，搭配 Vite + vite-plugin-uni 构建工具，支持一套代码编译为小程序、H5、App 等多端产物；
UI 与样式：整合 uView-plus 和 uni-ui 两大移动端专属 UI 库，适配移动端交互规范，SCSS（Sass）作为 CSS 预处理语言；
网络请求：使用 uni-app 内置的 uni.request，适配多端网络请求的底层差异；
测试体系：Vitest + Vue Test Utils 完成基础单元测试，结合 uni-automator 实现多端自动化测试，保障跨端功能一致性。

03

PARTTHREE

技术体系优势

生态统一：全端基于 Vue3 + TS 核心栈，跨端开发人员无需切换技术思维，降低团队协作成本；
场景化适配：后台侧重自研组件和高效开发，PC 端侧重 SEO 和性能，移动端侧重跨端兼容，各端技术选型精准匹配业务场景；
工程化完善：全端接入统一的测试体系，结合现代化构建工具，保障代码质量和交付效率。
总结
Vortmall 前端以 Vue3 + TypeScript 为核心底座，针对后台、PC、移动端三大场景定制化选型，兼顾统一性和场景适配性；
后台基于 Vite + Vue3 + 自研 Vort UI 构建，PC 端基于 Nuxt 生态优化 SEO 和首屏性能，移动端基于 uni-app 实现跨端兼容；
全端接入 Vitest 体系完成测试覆盖，结合现代化构建工具和主流生态库，保障开发效率和产物质量。