Vue.js项目：在线商城软件项目总结

Vue-supermall

Welcome to Vue-supermall👋

项目相关技术栈：Vue.js + Vue Router + Vuex + axios

🚀 如何运行

# 克隆
git clone https://github.com/yxiuzhu/supermall.git

# 打开项目目录
cd mushroom

# 安装依赖
npm install

# 开启本地服务运行项目
npm run serve

项目演示

• 项目演示地址（请用chrome手机模式浏览）
• 或扫描如下二维码浏览
  

项目页面及功能

• Home商城首页
• Cart购物车详情页
• Detail商品详情页

🏠Home商城首页

• 利用axios进行服务端通讯获取接口数据
• Swiper轮播图组件
• TabControl 标签吸顶
• GoodsList 商品列表通过event bus实现按需动态加载
• 利用mixin混入添加防抖函数debounce

💸Cart购物车详情页

• NavBar利用具名插槽实现三栏布局
• Vuex对购物车进行状态管理
• CheckButton商品全选按钮
• Vue.js组件复用

👗Detail商品详情页

• 封装第三方JS库better-scroll，处理商品详情滚动，实现详情页上下联动
• 封装工具函数utils.js进行时间格式化
• 封装Toast弹窗插件

实用的组件

通用组件包括如下

• Scroll移动端滚动组件
• Swiper轮播图组件
• Toast弹窗组件
• 基于axios封装的服务端通讯组件

还有一些是为本项目量身订做的组件，与上面的通用组件都在 src/components 目录下

CSS布局样式

• 公共base.css–基础样式，变量设置、防止高度塌陷
• 初始化normalize.css-初始化浏览器样式

项目优化

• vue-lazyload实现商品图片懒加载
• FastClick解决移动端点击的300ms的延迟
• debounce防抖函数实现页面刷新
• keep-alive避免页面反复重渲染导致的性能问题

作者

👤 y_xiuzhu(杨秀竹)

项目github地址，期待你的星星🌟

项目目录结构

supermall
├─assets – css资源及项目图片
├─common – 工具类及通用的mixin代码
├─components – 项目组件
│ ├─common – 项目通用组件
│ └─content – 项目业务组件
├─network – axios服务端通讯
├─router – Vue Router
├─store – Vuex
└─views – 项目业务视图组件

项目总结

axios进行服务端通讯

• 利用axios封装服务端通讯的数据接口
• 接口数据获取
  

Swiper轮播图组件

• 组件轮播图的实现：Swiper、SwiperItem
• 轮播组件使用HomeSwiper、DetailSwiper

TabControl 标签吸顶

• 引用better-scroll框架之后使sticky粘性定位失效
• 使用多一层TabControl标签的方式来实现标签吸顶效果
• 根据滚动位置决定标签是否吸顶

GoodsList 商品列表通过event bus实现按需动态加载

• 利用事件总线进行组件通讯，动态加载商品数据后触发better-scroll的refresh方法
• Home（监听事件总线事件）、GoodsList、GoodsListItem（利用事件总线通讯）

利用mixin混入添加防抖函数debounce

• 将防抖函数封装进工具类utils.js
• 防止动态加载商品列表时，refresh方法调用次数过多
  

NavBar利用具名插槽实现三栏布局

• 封装公共组件NavBar，利用具名插槽实现组件复用
  

Vuex对购物车进行状态管理

• 利用Vuex实现购物车商品列表的状态管理，如商品列表、商品属性

CheckButton商品全选按钮

• CheckButton新添商品默认选中
• CartBottomBar监测是否全选
  
  

封装第三方JS库better-scroll，处理商品详情滚动，实现详情页上下联动

• 利用插槽将better-scroll封装成Scroll组件
• Scroll组件监听到对应事件后将事件发送给父组件进行处理，例如上拉加载更多商品的实现，页面滚动的实时位置。
• Scroll组件通用方法的封装：页面滚动动画、页面刷新、完成上拉加载更多、返回上次滚动的页面位置

封装工具函数utils.js进行时间格式化

• 正则的使用
  

封装Toast弹窗插件

• 将Toast弹窗组件封装进Vue原型，便于组件复用
• 安装Toast插件，使用时仅需this.$toast.show('message', 2000)