前端电商项目

我要开发同款
爱写代码的周周2022年11月22日
160阅读

作品详情

项目介绍:该项目是基于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的方式才能实现
查看全文
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论