项目描述:线上零售 PC + 移动端自适应 H5 电商平台,覆盖商品浏览、购物车、下单支付、售后订单、商家
经营数据统计全流程,一套页面兼容电脑、手机端访问
技术栈:Vue3、Vite、Pinia、Alova、TypeScript、Tailwind CSS、Sass、CSS Module、Element Plus、
ECharts
主要职责:
自适应业务开发:基于 Vue3 搭建全站电商页面,全量 TypeScript 强类型约束,依托 Tailwind 响应式类完
成 PC / 移动端布局适配,减少两端重复适配代码 40%;
模块化状态管理:采用 Pinia 拆分购物车、用户权限、订单、筛选条件多仓库,隔离游客与登录用户数据,
降低跨组件状态耦合;
统一请求层封装:基于 Alova 搭建全局请求工具,统一处理接口缓存、防抖、异常重试、全局 loading 状
态,精简商品、支付、订单接口冗余代码,请求相关代码精简 35%;
业务通用组件沉淀:独立封装 15+ 复用组件(商品卡片、规格弹窗、结算表单、多条件筛选栏、分页表
格),统一全站交互与视觉规范;
样式分层管控:以 Tailwind 作为基础原子样式库快速开发页面,搭配 Sass 全局主题变量统一配色、尺寸规
范,样式开发效率提升 50%;
工程化能力搭建:基于 Vite 搭建项目脚手架,使用 Rollup 打包迭代内部通用工具库;配置 Babel 转译、
ESLint 编码校验,统一团队开发规范,线上低级语法 Bug 下降 60%;
数据可视化模块:独立开发商家经营后台看板,基于 ECharts 实现销量、营收、用户复购多维度图表,支
持时间筛选、数据联动查询;
全方位性能优化:落地路由懒加载、图片懒加载、静态资源压缩、代码分割方案,项目打包整体体积压缩
22%,常态化监控 LCP、CLS 页面核心性能指标;
协同迭代开发:通过 Git 多分支管理版本、处理代码冲突;借助 GitHub Copilot、Claude 辅助 TS 类型推
导、重构复杂逻辑、快速定位线上 Bug,整体开发效率提升 35%,对接后端完成全量接口联调,保障版本
稳定上线。