目录
一. 准备
二.开始写前奏
三.写
一. 准备
1.安装脚手架 -g 创建vue项目 vue3:vue create ProjectName vue2:vue init webpack ProjectName
2.建需要的文件夹
common(这里放一些公用的代码 一些js方法文件 mixin，utils，playcount等)
components/common&&content
network放网络请求数据相关
router 放路由相关
store 放让全局获取到的方法，值等
views 放各个页面的vue组件 分类放
3.设置 全局总线mitt ， 懒加载 引用之后 组件里的img v-lazy=“...” ， FastClick
4. 里导入（包括）@import "assets/css/";
px-vw 能适应各种机型
5.设置别名
二.开始写前奏
部分 放到公共组件文件夹 components/common/tabbar
flex布局 不要用margin等 不然postcss转化的时候样式会乱
父组件向TabBarItem传递path参数
itemclick 点击时跳转 isactive判断是否活跃 activestyle活跃时候的样式
活跃和不活跃的时候是两个图片 并且插槽要用div包裹起来 防止替换时样式失效
插槽 vue3写法和vue2不同 要用template包裹起来 里面是v-slot:插槽名字
2.写router ，vue3router和vue2不同 具体是这样的
路由里面需要传参数：
引用的时候也相当于是懒加载：需要用到那个就调用哪个
3.写NavBar
flex布局 left right 宽度固定 center flex:1 这个和TabBar一样是要一直固定位置 position:relative 好一点
三.写
1.轮播图
先获取数据 npm install axios --save
request 配置一下
里获取
在 create()调用 创建的时候就获取到了数据 把数据赋给data里的变量 传给子组件调用 这里的imgload 表示的是当轮播图加载了一张之后就计算高度传给之后需要高度的TabControl better的position和taboffsetTop配合实现tabcontrol停留
模块和轮播图大同小异
用点击记录currentindex currentindex=index 实现活跃 和goodlist配合实现商品的展示
-scroll配置 必须有个父元素和.content 配置项：pullUpLoad 等 方法：pullingUp（监测上拉的）上拉之后调用loadmore获取更多 scroll(监测滚动的)
商品数据获取 有参数 
通过page来控制获取不同的商品 一开始就获取了各种不同类型的商品一页 后续上拉的时候通过better-scroll插件的方法pullingUp检测到上拉 然后通过调用Home里定义的方法再次调用getHomeGoods 最后上拉完成后refresh
定义一个属性currenttype来控制获取的是谁的数据 和 要展示谁的 当点击tabcontrol时就已经把对应的数据给goodlist展示了
当goodlistItem里的图片加载的时候要刷新 从新计算高度 但刷新太频繁 封装防抖函数 利用事件总线对其进行防抖处理