[进行中] Vue3 在线商城系统

项目概述

这是一个基于 Vue3 构建的电商平台，参考了小兔鲜教学项目思路。整个开发过程中，我坚持先理解模块设计，再独立编码实现，遇到问题再回看讲解分析，逐步完成从页面构建、数据交互到组件封装、状态管理的各项功能，系统掌握了 Vue3 技术栈的实际应用。

• 项目名称：小兔鲜电商平台
• 开发时间：2025 年 6 月
• 源码链接：GitHub 仓库
• 在线浏览：Vue3 小兔鲜电商项目

项目目标与功能

这个商城平台采用前后端分离架构设计，前端基于 Vue3 全家桶，模拟了商品浏览、加入购物车、下单结算、用户中心等核心电商流程。虽然是练手项目，但我尽可能地按正式开发的方式去拆解模块、规划目录、编写逻辑，让项目既具完整性也具可维护性。

使用技术与工程配置

项目采用了当前主流的前端工程化方案，包括：

• 框架核心：Vue3 + Composition API
• 路由与状态管理：Vue Router 4、Pinia
• UI 组件与样式：Element Plus + SCSS
• HTTP 请求管理：Axios 封装 + 拦截器配置
• 构建与优化：Vite 构建、路由懒加载、图片懒加载（自定义指令）
• 代码规范自动化：ESLint + Prettier + Husky + lint-staged
• 版本管理与协作：Git 分支策略、规范化 commit（带校验钩子）

一些值得记录的实现细节

项目里有不少我自己动手调试、摸索出的实现思路，也收获了很多第一手经验，尤其是下面这些：

• 图片懒加载：基于 VueUse 的 useIntersectionObserver 封装了懒加载指令，显著降低首屏资源压力
• 路由懒加载：借助动态 import() 将模块按需加载，减少打包体积
• 组合式函数封装：将复杂逻辑抽离成可复用的 useXxx 函数，提升组件整洁度
• Pinia 模块拆分：将用户信息、购物车、商品数据拆成独立模块，并结合 localStorage 实现数据持久化
• Axios 二次封装：统一设置请求基地址、超时、loading 管理、错误提示与 token 注入逻辑

笔记收获

在项目开发过程中，我整理了一些关键技术的学习笔记，以下是部分相关笔记的链接：

• Element-Plus SCSS 方案定制主题 - 如何优雅地定制组件库主题色系
• Router 路由缓存问题 - 解决带参数路由组件不更新的常见问题
• Vue 封装逻辑函数 - 按业务拆分逻辑，提高代码可维护性

末

虽然项目参考了教程结构，但我采用"先思考再实现"的方式，尽可能用自己的理解去完成每一个模块。整个过程中，我不仅掌握了 Vue3 的核心特性，也开始接触前端项目中更具实际意义的内容：性能优化、代码规范、模块设计与开发流程控制。

项目代码已上传至 GitHub，项目已部署在 netlify。
仍在持续迭代中，下一步计划引入 TypeScript、完善订单与支付流程、并进行移动端适配优化。