一、创建gitHub仓库

将项目关联仓库并添加到仓库中

二、划分目录结构

三、引入两个css文件

base.css项目公共样式
normalize.css第三方兼容多浏览器统一样式

四、添加两个配置文件

配置格式标准
配置路径别名
注意: 在dom对象中使用别名需要在别名前面加~

五、项目的模块划分:tabbar -> 路由映射关系

下载vue-router插件配置router
关联组件资源

六、更换页面小图标

七、FeatureView

独立组件封装FeatureView
div > a > img

八、TabControl

独立组件的封装
props -> titiles
div>根据titles v-for遍历 div->span{{title}}
css相关
选中哪一个tab,哪一个tab的文字颜色变色,下面border-bottom currentIndex

九、首页商品数据的请求

设计数据结构,用于保存数据

goods: {  
    pop: page/list  
    news: page/list  
    sell: page/list  
}

发送数据请求
1.在home.js中封装了getHomeGoods
2.在Home.vue中,又在methods中getHomeGoods(type)

3.调用getHomeGoods('pop')/getHomeGoods('new')/getHomeGoods('sell')

。page:动态的获取对应的page
4.获取到数据: res 。this.goods[type].list.push(...res.data.list) 。this.goods[type].page += 1

十、对商品数据进行展示

封装GoodsList.vue组件
1.props:goods -> list[30]
2.v-for goods -> GoodsListItem[30]
3.GoodListItem(组件) -> GoodsItem(数据)
封装了GoodsListItem.vue组件
1.props: goodsItem
2.goodsItem取出数据,并且使用正确的div/span/img基本标签进行展示

十一、对滚动进行重构:Better-Scroll

在index.html中使用Better-Scroll
1.const bscroll = new BScroll(el, {});
2.注意:wrapper -> content -> 很多内容
3.1.监听滚动
。probeType:0/1/2(手指滚动)/3(只要是滚动)
3.2.上拉加载
。pullUpLoad:true
。bscroll.on('pullingUp', ()=>{}) 3.3.click:false
。button可以监听点击
。div不可以

十二、在Vue项目中使用Better-Scroll

1.在Profile.vue中简单的演示
2.对Better-Scroll进行封装:Scroll.vue
3.Home.vue和Scroll.vue之间进行通信
。Home.vue将probeType设置为3
。Scroll.vue需要通过$emit,实时将事件发送到Home.vue

十三、回到顶部BackTop

对BackTop.vue组件的封装
如何监听组件的点击
1.直接监听back-top的点击,但是可以直接监听?
。不可以，必须添加修饰.native
2.2.回到顶部
。scroll对象,scroll.scrollTo(x,y,time) 。this.$refs.scroll.scrollTo(0,0,500)
BackTop组件的显示和隐藏
1.isShowBackTop: false
2.监听滚动,拿到滚动的位置:
。position.y > 1000 -> isShowBackTop:true
。isShowBackTop = position.y > 1000

十四、解决首页中可滚动区域的问题

Better-Scroll在决定有多少区域可以滚动时,是根据scrollerHeight属性决定
。scrollerHeight属性是根据Better-Scroll的content中的子组件的高度
。但是我们的首页中,刚开始在计算scrollerHeight属性时,是没有将图片计算在内的
。所以,计算出来的高度是错误的(1300+)
。后来图片加载进来之后有了新的高度,但是scrollerHeight属性并没有进行更新
。所以滚动出现了问题
如何解决这个问题了?
。监听每一张图片是否加载完成,只要有一张图片加载完成了,执行一次refresh() 。如何监听图片加载完成了?
1.原生的js监听图片:img.onload = function() 2.Vue中监听:@load="方法"
如何将GoodsListItem.vue中的事件传入到Home.vue中
。因为涉及到非父子组件的通信,所以这里我们选择了事件总线
1.bus->总线
2.Vue.prototype.$bus = new Vue()
3.this.bus.emit('事件名称', 参数)
4.this.bus.on('事件名称', 回调函数(参数))
调用refresh非常频繁的问题,进行防抖操作
。防抖debounce/节流throttle
。防抖函数起作用的过程:
1.如果我们直接执行refresh,那么refresh函数会被执行30次
2.可以将refresh函数传入到debounce函数中,生成一个新的函数
3.之后在调用非常频繁的时候,就使用新生成的函数
4.而新生成的函数,并不会非常频繁的调用，如果下一次执行来的非常快,那么会将上一次取消掉

十五、上拉加载更多的功能

十六、tabControl的吸顶效果

获取到tabControl的offsetTop属性 。必须知道滚到多少时,开始有吸顶效果,这个时候就需要获取tabControl的offsetTop
。但是,如果直接在mounted中获取tabControl的offsetTop，那么值是不正确的
。如何获取正确的值?
1.监听HomeSwiper中img的加载完成
2.加载完成后,发出事件,在Home.vue中,获取正确的值
3.补充: 3.1.为了不让HomeSwiper多次发出事件
3.2.可以使用isLoad的变量进行状态的记录
4.注意:这里不进行多次调用和debounce的区别
监听滚动,动态的改变tabControl的样式
。问题:动态的改变tabControl的样式时,会出现两个问题:
1.问题一:下面的商品内容,会突然上移
2.问题二:tabControl虽然设置了fixed,但是也随着Better-Scroll一起滚出去了
。其他方案来解决停留问题
1.在最上面,多复制了一份PlaceHolderTabControl组件对象，利用它来实现停留效果
2.当用户滚动到一定位置时,PlaceHolderTabControl显示出来
3.当用户滚动没有达到一定位置时,PlaceHolderTabControl隐藏起来

十七、让Home保持原来的状态

让Home中的内容保持原来的位置。离开时,保存一个位置信息saveY 。进来时,将位置设置为原来保存的位置saveY信息即可 1.注意:最好回来时,进行一次refresh()

十八、点击商品进入详情页

GoodsListItem点击
点击之后获取商品的IID,跳转到详情页,并且传入IID

十九、解决-首页保持位置状态

deactivated: 记录离开时的位置
activated: 通过scrollTo函数,设置离开时的位置
bug:Better-Scroll最新的1.15.0有scrollTo的位置。解决方案:进行版本的回退:1.13.2

二十、详情页的导航栏实现

返回按钮:left
标题列表的展示:center

二十一、请求详情的数据

接口:/detail?iid=

二十二、轮播图的实现

Swiper/SwiperItem

二十三、商品基本信息的展示

数据来自四面八方
对数据进行汇总:一个对象当中
一个对象传入到子组件中

二十四、商品图片的展示

二十五、参数信息的展示

二十六、评论信息的展示

时间格式化
服务器返回的时间戳 -> date -> 格式化
yyyy-MM-dd hh:mm:ss

二十七、推荐数据的展示

请求推荐数据
GoodsList展示数据

二十八、minxin的使用

创建混入对象: const mixin = {}
组件对象中: mixins: [mixin]

二十九、标题和内容的联动效果

在detail中监听标题的点击,获取index
滚动到对应的主题: 。获取所有主题的offsetTop 。问题:在哪里才能获取到正确的offsetTop 1.created肯定不行,压根不能获取元素 2.mounted也不行,数据还没有获取到 3.获取到数据的回调中也不行,DOM还没有渲染完 4.$nextTick也不行,因为图片的高度没有被计算在内 5.在图片加载完成后,获取到高度才是正确

三十、内容滚动,显示正确的标题

(this.currentIndex !== i && ((i < length - 1 && positionY > this.themeTopYs[i] && 
positionY < this.themeTopYs[i + 1]) || (i === length - 1 && positionY > this.themeTopYs[i]))

三十一、顶部工具栏的封装

三十二、详情页的回到顶部

home.vue和detail.vue回到顶部:mixin

三十三、点击加入购物车

监听加入购物按钮的点击,并且获取商品信息 1.监听 2.获取商品信息:iid/price/image/title/desc

三十四、将商品添加到Vuex中

安装Vuex
配置Vuex
定义mutaitions,将商品添加到state.cartList
重构代码: 1.将mutations中的diamante抽取actions中(定义连个mtations) 2.将mutatios/actions单独抽取到文件中

三十五、购物车的导航栏的展示

三十六、购物车商品的展示

CartList -> Scroll(滚动问题)
CartListItem -> CheckButton

三十七、商品的选中和补选中切换

修改模型对象,改变选中和不选中

三十八、底部工具栏的汇总

全选按钮
计算总价格
去计算:

三十九、购物车的全选按钮

显示的状态
1.判断是否有一个不选中，全选就是不选中
点击全选按钮
1.如果原来都是选中，点击一次，全部不选中 2.如果原来都是不选中(某些不选中),全部选中

四十、添加购物车弹窗

Vuex的补充 1.Actions可以返回一个Promise 2.mapActions的映射关系
Toast(吐司)封装 1.普通封装方式 2.插件封装方式

四十二、fastClick减少点击延迟

安装fastclick
导入
调用attach函数

四十三、图片的懒加载

什么是图片懒加载 1.图片需要现在在屏幕上时，再加载这张图片
使用vue-lazyload 1.安装npm install vue-lazyload --save 2.导入import VueLazyLoad from 'vue-lazyload'; 3.注册插件Vue.use(VueLazyLoad) 4.修改img:src-v-lazy