尚品汇商城Vue3版本

安装

npm install // 安装依赖
npm run dev	// 启动本地开发服务器运行项目

简介

本项目是一个仿京东的SPA商城项目，拥有完整的购物流程。有登录、注册、搜索、购物车、个人中心、支付等多个模块。后端接口来自网络，开发者可以根据这些资源使用前端框架做出一个SPA应用。第一次我采用了Vue2开发，Vue-cli搭建项目，近期又采用webpack手动搭建、以及在项目部分中混入TypeScript方式把项目升级为了Vue3项目，希望能以此不断提高自己的开发水平。

项目剖析

组件层面：根据静态页面以布局、功能和内容为区分拆分为不同的组件，本项目页面大多为圣杯布局，header和footer都为普通组件,中间部分container是一级路由组件，根据用户操作替换中间的一级路由组件实现不同模块之间的切换。对于一级组件中的子组件，如被多个组件共用，则封装为全局组件，比如本项目中的三级联动下拉菜单、轮播图、分页器。

技术层面：各个模块的状态管理使用 Pinia 实现；组件通信根据需要通信的次数、通信双方的从属关系、数据的流向等为依据分别采用了props、自定义事件、以及第三方库mitt实现；Ajax 请求通过 Axios 发送、图片懒加载采用 Vue-lazyload、表单验证采用vee-validate、部分数据采用Mock.js模拟后端响应、组件切换根据业务逻辑采用路由守卫控制；

项目搭建：Vue2版本采用Vue-cli搭建；Vue3版本采用了 webpack,手动搭建，根据当前开发的需要，配置所需的依赖。在查阅了大量网络资源后最终成功手动搭建起了项目，在此过程中熟悉了搭建项目的常用配置。

补充说明

main、master 分支是Vue2 版本项目，three 分支是Vue3 版本项目。