vue2 cli3 supermall 项目总结

前言

这个项目是我的第一个项目也是学习Vue检验成果的项目，这是小马哥里王红元老师讲解的课程的项目，

学习了一个月，对vue也有了一定的了解，在以后的学习过程中再接再厉。

 

1、项目介绍

1.1、技术栈

本项目由Vue2，使用vue全家桶、better-scroll、lazyload、postcss-px-to-viewport  等进行开发

页面跳转： router  路由跳转

移动端适配： postcss-px-to-viewport  插件转化 vw 和 rem

 数据请求： axios

 图片懒加载：lazyload

 

2、项目文件管理

2.1、git链接项目

使用 git 链接 github 厂库进行版本管理

2.2、工程目录划分

常规 工程目录   

assets	common	components	network	router	store	views
css和img	const/mixin	复用组件/业务组件	数据请求	router	vuex	页面组件

 

2.3、代码规范

使用 英文变量名/文件 ，代码标准规范

3、功能

3.1、首页

             

封装可复用组件： 轮播图、tabbar

业务复用组件：navbar、商品展示、回到顶部

 

使用：better-scroll 插件支持移动端滑动

学习到了 滑动到底部请求新的数据、滑动到指定位置后navbar浮动、滑动超过指定位置后显示组件可返回顶部、进入详情页保留原位置

难点：better-scroll 异步的bug

由于数据请求是异步操作，scroll插件无法准确计算滑动高度，从而造成：无法滑动/滑动不下去的bug

解决：插件的函数refresh，重新计算宽高

监听图片加载完毕后，发送事件总线，主页事件总线监听执行 refresh，由于监听图片的个数过多，频繁调用函数，造成性能浪费

为了节省性能，使用 防抖/节流 函数  防止过于频繁的调用函数

为了更好的节省性能，使用 lazyload 懒加载 

 

3.2、分类

分类页较为简单，使用 flex 布局划分两个区域，各自区域使用scroll滑动，点击标题请求对应数据替换即可。

每一个商品都链接对应的详情页数据

使用封装的组件，快速搭建页面，一个简单的分类页完成

  

同首页进入详情页返回时保留原位置

 

3.3、详情页

         

进入方法：首页、分类、推荐等

顶部 tabbar 监听是否到达区域 点亮，点击跳转指定位置

数据使用 class 分段请求，便于后续修改添加新功能

复用组件：顶部导航、轮播图、返回顶部、ui提示

底部操作栏，只做了加入购物车

加入购物车后将该商品数据插入Vuex暂存，由于没有服务器只能如此。

 

3.4、购物车

由于没做登录等，只实现少部分功能。

价格计算、选中个数、全选时点亮、个别未选取消、点击全选、点击全取消

数据都由vuex记录

 

3.5、我的

一个简单的页面布局

使用组件化封装思想，不需要代码即可插入新的数据，提供数据即可使用

4、总结

这个项目让我学到了很多也让我巩固基础知识，最重要的是网络请求封装，组件化思想。

感谢 codewhy 的Vue教程，讲得很好，原理解剖等。