一、创建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