项目介绍：

该项目是基于vue-cli创建的一个综合性的电商购物网站，类似于淘宝，京东商城。登录后用户可以在该网站浏览商品，加入购物车，下订单以及各种各样的活动。未登录的用户可以不能进行下单，他们可以通过手机号注册或者qq登录的方式进行登录完成购物。

技术栈：

vue3.0（使用组合API的方式来开发），axios，vue-router（单页路由），vuex（状态管理， vuex数据持久化），@vueuse/core（组合api常用工具库）， vee-validate（表单校验）

遇到的问题：

（1）后台接口请求完毕，但是数据缺乏（分类，商品），所以会有一些本地的moke数据

（2）绝大多数第三方UI组件库不支持vue3.0，大多数组件由自己封装（轮播图，复选框，对话框消息提示和消息确认组件，城市选择组件）

（3）第三方登录也是有点难度

vuex-持久化：

让在vuex中存储的状态和数据存储在本地。

在开发过程中，用户的信息（名字，头像，token等）需要在vuex中存储且需要存储在本地

购物车未登录状态下也支持，管理在vuex中的数据需要存储在本地

所以，通过安装vuex插件来支持vuex的状态持久化

请求工具：

基于axios封装的请求工具，调用接口时使用

（1）创建一个新的axios实例

（2）请求拦截器：如果有token进行头部携带

（3）相应拦截器：①剥离无效数据 ②处理token失效

（4）导出一个函数，调用当前的axios实例发请求，返回一个promise

首页：

（1）使用less自动化导入

使用less混入，就是声明一段css代码（选择器包裹的代码）或者函数，在其他css选择器调用，可服用包裹的代码

完成自动注入公用变量和混入遇到的问题：

每次使用公用变量和mixin的时候需要单独引入到文件中

解决方法：使用vuecli的style-resources-loader插件来完成自动注入到每个less文件或者vue组件中style标签中（安装完插件后再vue.config.js中进行配置，然后再重启服务器）

轮播图组价的封装：

暴露一个自动播放属性，通过设置一个定时器来控制自动播放，先设置默认显示图片的索引为0，

const index = ref（0），自动播放根据数组，如果它的索引大于传过来数据数组的长度，则重新把索引设置为0

通过监听传过来的数据，如果有数据开启自动播放，调用自动播放的函数

指示器切换上一张下一张：

就是给指示器添加click事件然后传递参数一个是1，一个是-1分别代表前进和后退
vue动画：（Transition组件的使用）

在vue中，显示隐藏创建移除一个元素或一个组件的时候可以通过transition实现动画

进入：（显示，创建）

v-enter 进入前（vue3.0是 v-enter-form）

v-enter-active 进入中

v-enter-to 进入后

离开（隐藏，移除）

v-leave离开前（vue3.0是 v-leave-form）

v-leave-active 离开中

v-leave-to 离开后

多个transition使用不同的动画，可以添加name属性，name属性的值替换v即可

组件数据懒加载：（当前组件进入可视区再加载数据）

使用@vueuse/ core中的useIntersectionObserve函数来实现监听可视区域行为，必须配合vue3.0的组合API的方式才能实现