pc电商逐字稿vue3
项目搭建
我们做的pc电商项目是个电商网站，使用到了 Vue3 技术。
项目都是我们从0到1搭建的，都是按 Vue3 的最新标准操作。
脚手架用的是 Vite，技术栈是 Vue3 + TS + Pinia，使用组合式API的 setup 语法糖开发。
脚手架 Vite 配置了：路径别名，服务器代理，setup语法糖拓展插件，less 变量自动导入等。
风格管理我还配置了 ESlint + Prettier + EditorConfig 做统一格式化，按保存就能自动根据配置格式化，防
止提交的时候，为了方便其他同事开发的时候保持一样风格，我还做了一些工作区配置和插件推荐集成
到项目中 setting.json 和 extensions.json。
axios 请求库针对 TS 类型进行了封装一层，让接口的返回值有更好的TS类型提示，项目中的接口类型声
明文件也做了统一的规划管理。
首页模块
首页和很多页面的头尾都是一样的，做了一些路由的划分，封装了公共的头部和尾部组件。
由于封装抽离了，就要考虑到状态管理的问题，整个首页的数据都通过Pinia做全局状态管理。
首页的为了增强用户体验，也增加了一些交互特效如导航滚动吸顶，返回顶部等，首页楼层的一些重复
的部分都抽离成组件方便复用。
因为PC端没有合适的组件库，首页的轮播图组件，骨架加载组件都是自己封装的，其实整个项目的组件
库都是自己用 Vue3 + TS 封装的，使用时还支持类型提示和校验。
这里封装组件库的时候遇到了一个难点，就是把自己封装的组件库作为全局组件之后，就没有了TS的类
型检查和提示了，这里我是借鉴了 Element-Plus 的源码最后找到了解决方案，自己为组件库写了个类型
文件之后，项目中全局组件也能有类型提示了。
首页还做了一个懒加载的优化和数据缓存优化。懒加载的思路是模块进入可视区后，再发送请求获取数
据，最终渲染组件。数据缓存通过Pinia的插件实现打开首页速度更快。
懒加载的功能比较常用，所以我用组合式API直接封装成了一个 hooks 钩子函数方便复用。
分类模块
分类模块整体比较简单一些，主要是分类和商品的列表渲染。
但是在处理的过程中也遇到了两个路由的问题。第一个是路由的缓存，点击顶部切换分类的时候，不会根据新的分类id请求新的分类数据，解决方案是
给二级路由的 RouterView 加 Key 值为路由的 fullPath 就能解决，其实还有一个解决方案，可以通过
watch 侦听路由的 fullPath ，如果变化就重新发送请求渲染新的分类数据。
第二个问题是滚动行为，切换分类的时候需要返回顶部，处理起来比较简单，踩坑的原因是主要是新版
VueRouter 的API变了，查最新官方文档后解决了，后来再系统看了一遍官方文档就没踩什么新的坑了。
详情模块
详情模块以内容展示为主。
难点是在这个页面需要自己封装一些组件，如商品切换效果组件，地址选择组件，商品数量组件，加载
中，消息提示组件，按钮组件，商品规格选择组件。
其中按钮组件虽然简单，为了更好的TS类型提示，也遇到了TS类型 props 默认值的问题，最后查阅最新
官方文档其实有三种解决方案，最简单的是基于 JS 的基础上添加类型断言，还可以通过 withDefaults 和
最新的响应性语法糖解决。
商品数量组件需要通过 v-model 实现双向绑定，Vue2 和 Vue3 组件的 v-model 有些差异，Vue2 的 :value
改名为了 modelValue，@input 事件改名为了 @update:modelValue，这些都可以在 Vue3 的官方文档查
阅。Vue3 现在最新的官方文档真的好用，不过中文版还没正式发布，我都是通过查 GitHub 开源仓库的
时候找到的这个未发布的中文官网并分享给了同事。
登录模块
项目支持多种登录方式：有账号密码登录，手机号+验证码登录和第三方授权登录。
登录逻辑我都是封装到了 Pinia 中，添加一种新的登录方式只需要添加一个新的 actions 就可以了，并且
方便进行全局状态管理，登录成功后返回的 token 也是通过 Pinia 自动同步到本地防止页面刷新后数据
丢失。
第三方QQ授权登录，前端需要 appid 和登录成功后的回调地址。
回调地址需要配置环境才可以实现，如登录回调地址需要修改电脑的 hosts 文件和项目 vite 脚手架的配
置。
在QQ登录成功后，可以通过QQ互联的API获取QQ用户信息，OpenId 做登录绑定，如果已经绑定账号过
的用户都是可以一键授权登录的。
这里有个小插曲，QQ互联的API源码是用JS写的，我项目是TS开发并且还配置了Eslint，直接引入 JS 代
码会报类型错误和全局变量错误，这里我是通过手写 TS 类型声明文件 + eslint 配置全局变量解决的。
购物车模块
我们的项目是分为两种状态的购物车。一种是用户已登录，还有一种就是用户未登录，这里也拆出来一
个 Pinia 模块管理购物车。
已登录版的购物车相对比较简单，只需封装一个个的 actions ，如加入购物车，删除商品，修改数量和
选中状态，在用户操作的时候调用对应接口就可以了。未登录的版本就麻烦一些，加入购物车，删除商品，修改数量和选中状态这些逻辑都由前端完成，为了
防止刷新数据丢失，还需要自动同步到本地存储。
购物车如何区分已登录和未登录两种状态，我是先把用户登录信息缓存到购物车模块的 getters 中，在
每一个 actions 内部进行登录状态判断，用户已登录那就调接口，未登录前端完成增删改查逻辑，这样
就能实现在组件中调用 actions 的时候更方便，也方便后期维护，用户登录和退出与购物车的逻辑也是
做了同步处理的，登录合并购物车，退出清空购物车。
这里还有个小细节就是，未登录状态如何保持本地商品的信息是最新的，这里我封装了一个 action ，在
本地版购物车进行增删改查的时候，主动调用接口查询最新商品信息库存和价格。当然在用户首次进入
网站的时候，也会同步购物车列表所有商品的库存和价格。
订单与支付模块
下单要求用户登录，不是人人都能访问，这里我通过设计路由导航守卫进行判断，如果用户未登录就跳
转到登录页，并且完成了登录成功后的页面回跳到原来的页面，提升用户体验。
下单需要用户选择收货地址，收货地址的弹出的对话框也是自己封装到组件库中，这里还用到了 Vue3
新增的 Teleport 传送门组件防止出现对话框定位的 Bug 。
用户提交订单后就会生成一个订单号，并且跳转到支付页面，下单页面的倒计时我也封装了一个 hooks
函数，方便在项目中复用。
下单后可以用支付宝完成支付，支付成功后就会回跳到支付结果页，用户也可以在个人中心查询到支付
或未支付的订单。微信支付由于还没接口所以没有实现，不过流程也都差不多。
会员中心
会员中心主要是用户信息的展示和订单信息的展示，这里就不过多阐述了。
