一、初始化项目

1.1 创建项目并推送到远程Github

创建项目:
vue create mall

在 Github 创建空仓库，记住是什么文件都不需要。
然后与远程仓库建立连接 ：
git remote add origin git@github.com:penggang-home/mall.git

推送到 Github：
git push -u origin master

1.2 划分目录结构

首先我们需要划分目录结构

1.3 引入两个CSS文件

Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。

Normalize.css只是一个很小的css文件，但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。
相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。总之，Normalize.css是一种CSS reset的替代方案。

1.4 vue.config.js 和 .editorconfig

vue.cofnig.js 这里主要用于配置我们的 路径 别名
.editorconfig 主要用于规定项目规范的

1.5 项目的模块划分 => 路由映射关系

二、首页开发

2.1 FeatureView 本周流行

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

2.2 TabControl 控制栏

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

2.3 首页商品数据的请求

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

goods: {

pop: page/list

new: page/list

sell: page/list

}

2.3.2 发送数据请求

• 在home.js中封装getHomeGoods(type, page)
• 在Home.vue中, 又在methods中getHomeGoods(type)
• 调用getHomeGoods(‘pop’)/getHomeGoods(‘new’)/getHomeGoods(‘sell’)
  • page: 动态的获取对应的page
• 获取到数据: res
  • this.goods[type].list.push(…res.data.list)
  • this.goods[type].page += 1

goods: {

pop: page1:/list[30]

new: page1/list[30]

sell: page1/list[30]

}

3 对商品数据进行展示

3.1.1 封装GoodsList.vue组件

• props: goods -> list[30]
• v-for goods -> GoodsListItem[30]
• GoodListItem(组件) -> GoodsItem(数据)

3.1.2 封装GoodsListItem.vue组件

• props: goodsItem
• goodsItem 取出数据, 并且使用正确的div/span/img基本标签进行展示

4 对滚动进行重构: Better-Scroll

4.1 在index.html中使用Better-Scroll

• const bscroll = new BScroll(el, { })
• 注意: wrapper -> content -> 很多内容
• 1.监听滚动
  • probeType: 0/1/2(手指滚动)/3(只要是滚动)
  • bscroll .on(‘scroll’, (position) => {})
• 2.上拉加载
  • pullUpLoad: true
  • bscroll .on(‘pullingUp’, () => {})
• 3.click: false
  • button可以监听点击
  • div不可以

4.2 在Vue项目中使用Better-Scroll

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

5 BackTop 回到顶部

5.1 对BackTop.vue组件的封装

5.2 如何监听组件的点击

• 直接监听back-top的点击, 但是可以直接监听?
  • 不可以, 必须添加修饰.native
• 回到顶部
  • scroll对象, scroll.scrollTo(x, y, time)
  • this.$refs.scroll.scrollTo(0, 0, 500)

5.3 BackTop组件的显示和隐藏

• isShowBackTop: false
• 监听滚动, 拿到滚动的位置:
  • -position.y > 1000 -> isShowBackTop: true
  • isShowBackTop = -position.y > 1000