项目一:擎朗智能产品商城-Vue2
项目描述:擎朗智能是官方的综合性线上商城,为全国各地的特产商,里面包含产品和公司介绍,以及服务支持和新闻资讯
技术体系:Vue2、Vue-router、Vuex、Axios、Vue-lazyload、MockJS,Swiper,Nprogress项目职责:
1、参与了项目的需求分析,提出了前端功能实现的合理化建议与解决方案
2、设计并实现商品详情展示和后期维护
项目技能点:
1、利用 uuid 和 LocalStorage 存储数据设置临时标识,用来实现用户免登录来操作购物车
2、注册页面使用插件vee-vaidate 进行表单验证
3、使用v-model 加 compute 实现购物车的全选全不选
4、使用 promise.all 删除多个数据
5、通过 qrcode 第三方包,来生成支付的二维码让用户扫描支付,然后通过定时器向后台轮询获取用户
支付状态
6、使用Axios 发送请求,从后端请求数据并整理
项目二:技术支持后台管理系统-Vue3
项目描述:是一个技术中台管理平台,主要为前台项目提供数据支撑技术体系:Vue3、ElementPlus、TypeScript、Pinia、Nprogress、Vite 项目职责:
1、参与了项目的需求分析,提出了前端功能实现的合理化建议与解决方案
2、权限管理模块:实现不同用户拥有不同角色的操作权限
项目技能点:
1、运用 flex 布局 + element-plus 搭建静态页面
2、运用全局前置守卫router.beforeEach 和路由器的 addRoute 来实现过滤用户路由和动态添加路由
3、通过使用 lodash 来实现深拷贝用户数据回显及过滤用户路由
4、对 axios 进行二次封装,统一管理数据,使用NProgress 实现请求时进度条加载功能
5、利用 app.directive 指令来封装自定义指令来实现按钮鉴权
项目三:荟到家-小程序
项目描述:是基于 uni-app 实现的商城APP以及微信小程序
技术体系:vue + vuex + webpack + uniapp + lodash + uView + sass
项目职责:1、首页显示 2、登陆 3、下单支付 4,pc端移动布局
项目技能点:
1、使用 uni-app 框架搭建页面
2、使用小程序官方库,实现轮播、按钮、弹窗等效果
3、将复用的组件进行封装,实现组件的多次使用
4、使用 tabBar 组件完成页面跳转
5、使用 pub-sub ,路由传参,实现组件间通信
6、通过wx. navigateTo,来完成首页跳转分类页
7、封装搜索功能,使用插槽完成多页面使用,通过防抖实现搜索性能优化
8、事件绑定与修饰符的使用,阻止默认事件与阻止冒泡
项目四:荟到家中台-pc 移动端
项目描述:是基于Vue2 实现的商城中台移动端服务平台
技术体系:vue + vuex + webpack + lodash + uView + qrcode
项目职责:1、页面搭建 2、登陆 3、商品上架下架添加 4,产品数据化展示
项目技能点:
1、使用 rem 适配方案,实现不同设备显示相同的比例
2、使用 import()实现路由懒加载,vue-lazyload 实现图片懒加载,提升性能
3、通过 Lodash 的函数节流(throttle)方法,对三级分类页面用户移入移出的高频操作进行优化
4、利用 uuid 和 localStorage 设置临时用户唯一标识(templd),实现未登录态的用户数据不展示及其相关操作
5、借用 qrcode 包生成支付二维码,使用 MessageBox 模态对话框组件实现了弹窗展示支付二维码完成订单
6、使用一个轮询机制异步请求,实现支付成功与否的状态判断
7、借助瀑布流插件(vue-masonry)和浏览器提供的 API (IntersectionObserver)实现了瀑布流图书列表展示