二、小兔仙Vue3（项目介绍）

项目介绍

#01-项目介绍

目的：了解下项目的基本功能。

• 电商发展十余年，是个成熟的模式，小兔鲜儿是B2C电商平台，综合品类平台。

• 平台理念：（品质）新鲜、（价格）亲民、（物流）快捷。

目标功能：

• 首页模块：顶部通栏，吸顶导航，网站头部，左侧分类，轮播图，新鲜好物，人气推荐，热门品牌，分类商品推荐，专题推荐，网站底部。
• 一级分类：面包屑，轮播图，全部二级分类，二级分类推荐商品。
• 二级分类：筛选区域，排序功能，商品列表，无限加载。
• 商品详情：商品图片展示，基本信息展示，配送城市选择，SKU选择，库存选择，商品详情展示，商品评价展示，24小时热销，相关专题，加入购物车。
• 购物车
  • 头部购物车：展示商品数量和列表，删除商品，跳转购物车页面。
  • 购物车页面：购物车商品展示，选择商品，修改数量，修改商品规格，价格计算，跳转下单
• 登录模块：表单校验，账户密码登录，手机号登录，第三方登录，绑定手机，完善信息
• 填写订单：订单商品展示，收货地址选择，收货地址修改，支付方式选择，生成订单。
• 进行支付：订单信息展示，跳转支付网关，提示正在支付，等待支付结果，跳转支付成功页面。
• 个人中心
  • 中心首页：展示个人信息，近期收藏商品，近期足迹，猜你喜欢
  • 订单管理：全部订单，待付款，待发货，待收货，待评价，已完成，已取消。立即付款，取消订单，确认收货，删除订单，查看物流。
  • 订单详情：订单状态，订单进度，详细信息。

总结：完成电商支付闭环。

#02-配套资源

目的：了解真实企业开发都会有哪些配套资源。

企业开发配套：

• 设计图(opens new window)
• 原型稿(opens new window)
• 接口文档(opens new window)

我们学习配套：

• 接口文档
• 参照案例vue3.0(opens new window)
• 参照案例vue2.0(opens new window)

总结：

• 在学习开发阶段使用本地API文档与vue3.0版本样例。

#03-使用技术

目的：概述下项目会运用到的技术点。

项目基于vue技术来实现，大概会使用以下技术：

• vue3.0 (使用组合api的方式来开发)
• vue-cli (项目脚手架)
• axios (请求接口)
• vue-router (单页路由)
• vuex (状态管理)
• vuex-persistedstate (vuex数据持久化)
• normalize.css (初始化样式)
• @vueuse/core (组合api常用工具库)
• 算法 Power Set(opens new window)
• dayjs (日期处理)
• vee-validate （表单校验）

重点： 电商常见业务和解决方案，掌握基于vue3.0的组合api开发模式。

说明： 由于前台项目，没有合适的UI组件库（没有适用vue3.0的ui库），所有组件基本自己封装。

• 轮播图组件
• 面包屑组件 render+createVnode
• 查看更多组件
• 骨架屏组件
• 复选框组件
• 单选框组件
• 对话框组件
• 消息提示组件 函数调用
• 消息确认组件 函数调用
• 分页组件
• 步骤条组件
• 时间线组件
• 标签页组件 render + jsx
• 城市选择组件

总结：基于vue3.0的技术栈，大量的组件封装。

#04-前情提要

目的：说明在学习开发过程当中可能遇到的问题。

1. 后台接口基本完毕，但是数据缺乏（分类，商品），所以会有一些本地mock数据。

2. 采用vuex来管理购物车和用户数据，vuex的使用会淋漓尽致。

3. 使用vue3.0来开发，所以小兔鲜儿项目，会很 鲜嫩 酸爽 。 但是会慢慢过渡。

4. 重点难点，第三方登，商品详情，购物车，支付结算，订单管理。

5. 绝大多数第三方UI组件，组件库不支持vue3.0，会大量自己封装和布局。有些基本样式会预制好。

总结：

• 预告下我们开发的剧情