文章目录一、概述二、项目总览与技术栈对比2.1 两端定位与差异2.2 统一技术栈2.3 项目目录结构对比三、工程初始化与应用启动3.1 管理端入口（main.js）3.2 店铺端入口（main.js）3.3 根组件 App.vue四、环境变量与网络配置4.1 环境变量体系4.2 网络配置模块4.3 Vite 代理配置五、Axios 请求封装5.1 管理端请求封装（request.js）5.2 店铺端请求封装（增强版）5.3 请求方法对照表5.4 API 模块化设计六、路由系统与权限控制6.1 管理端路由配置6.2 店铺端路由配置6.3 权限守卫（permissions.js）6.4 路由守卫流程图七、状态管理（Pinia）7.1 管理端用户仓库7.2 店铺端用户仓库（增强版）7.3 状态持久化策略八、页面布局与组件设计8.1 管理端布局（Main.vue）8.2 管理端页面视图8.3 店铺端页面视图（176+ 页面）8.4 通用业务组件（店铺端）九、Element Plus 集成与主题定制9.1 自动按需导入9.2 店铺端样式覆盖9.3 样式变量定义十、全局过滤器与自定义指令10.1 全局过滤器10.2 自定义指令十一、店铺端 DIY 页面装修引擎11.1 DIY 引擎概述11.2 DIY 引擎工作流程11.3 相关辅助组件十二、Vite 构建优化12.1 插件链路12.2 生产构建配置12.3 构建产物结构12.4 性能优化策略汇总十三、开发规范与最佳实践13.1 页面组件命名规范13.2 API 文件规范13.3 新增页面开发流程13.4 ESLint 配置十四、常见问题与解答Q1：开发环境代理不生效怎么办？Q2：Element Plus 组件样式覆盖无效？Q3：登录后跳转空白页？Q4：接口请求总是报 401？Q5：生产环境打包后静态资源 404？十五、小结一、概述在现代 Web 应用架构中，中后台管理系统与前台业务端的分离已成为行业主流实践。管理端侧重权限管控与系统配置，店铺端则承载商品管理、订单处理、页面装修等丰富的业务功能。本文将基于 wind Shop 电商系统，系统性地剖析管理端（wind_shop_single_admin）与店铺端（wind_shop_single_shop）两大前端工程的架构设计、核心模块实现与开发规范。学习目标：掌握管理端与店铺端的 Vue 3 + Vite + Element Plus 工程化架构理解路由权限控制、状态管理、Axios 封装的完整实现学会店铺端 DIY 页面装修引擎的设计原理掌握 Vite 代理配置、Gzip 压缩、分包策略等构建优化技巧能独立完成新页面的增删改查功能开发前置知识：Vue 3 Composition API 基础、Vite 构建工具使用经验、Element Plus 组件库基本用法、Pinia 状态管理概念、Axios HTTP 客户端使用。二、项目总览与技术栈对比2.1 两端定位与差异管理端与店铺端虽然共享核心技术栈，但在功能定位和依赖上存在显著差异：维度