[TOC]

image.pngimage.pngimage.png
预览链接

西西超市是基于 Vue3 全家桶 / TypeScript 开发的购物应用
实现了注册 / 登录 / 浏览商品 / 添加购物车 / 订单结算 / 生成订单 / 查看购物车 / 订单展示 / 个人信息展示 等完整购物流程所需功能。
项目使用了 Vue3 最新的 setup 单文件组件语法composition API,使用 FastMock 模拟商品数据, 封装了 axios 用于数据获取,所有组件都由自己编写,未使用任何第三方组件库。

实现项目的关键步骤都记录成了博客,整理如下:

  1. 项目搭建
  2. 首页docker
  3. 首页开发
  4. 使用svg-sprite-loader
  5. 用路由守卫做登录校验
  6. 使用axios发送mock请求
  7. Toast弹窗组件
  8. 拆分setup函数
  9. 注册校验
  10. 路由懒加载
  11. 路由传参
  12. 商品列表页
  13. 购物车开发
  14. 订单结算页面
  15. 所有组件改用