home页的图片区
顶部滚动条：MUI的tab-top-webview-main组件
设个组件需要用到mui的js文件
引入
//MUI的js文件，解决顶部滑块无法滑动问题
import mui from '../../lib/MUI/js/mui.min.js'
引入之后要初始化组件
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
目前的问题：
1，当从home页进入图片页的时候刚进入时无法滑动滑块的
原因：刚进入组件dom没有渲染完毕，找不到元素，也就额无法初始化组件
解决：把组件初始化放到mounted中或created中dom渲染完毕再初始化。
2，组件可以滑动，但滑动时浏览器报错
mui.min.js?c9ae:6 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
原因：谷歌浏览器的一个增强滑动流畅度的东西，别的浏览器可能没有
解决：在style中加入touch-action:pan-x;表示启用单指在x轴滑动，没感觉有什么卵用，但能解决问题
3，滑块可以滑动，但点击底部tabbar区域切换页面报错，而且点击无法切换页面
原因：组件问题，lower的MUI样式命名冲突可能是
解决：把底部tabbar的样式名为mui-tab-item的换成自己的一个跟他样式一样的类名，注意凡是涉及到mui-tab-item的样式全部复制粘贴到自己的style中将其中的mui-tab-item改为新的样式名
4,小问题，改变完上面的样式后问题解决底部tabbar图表高了10px，
原因：不明，可能是改动mui-tab-item样式时哪没弄好
解决：找到原来对应图标的样式，将它的padding-bottom设置为0，注释不好使，会自己再加回去，可能是引入css样式文件自动添加的，只能新写一个覆盖燕来样式
图片主题部分显示图片，用Mint-ui的懒加载
图片点击近去还有详情页，详情里面有评论和缩略图，缩略图用vue-preview插件
在这不想再做一个组件，怪麻烦的，直接做出一个点击任意一张图片能够点开，查看的功能
就是将原来加载的图片全部变成缩略图，感觉没省多少事，原先的图片都不用了，懒加载也没用了，
scss安装使用
突然感觉scss看起来挺好用的，试一下吧
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
修改APP.vue的样式，
<style lang="scss"></style>
商品页
没找到合适的组件，自己写吧，遇到问题
1，流式布局造成的高度不一
解决：父组件弹性布局，竖着排列，子元素两端排布
display: flex;
flex-direction: column;
justify-content: space-between;
然后给单个商品一个最低高度，防止图片没加载成功时，有个框在，不至于页面坍塌。
在手机上查看项目适配情况
方法：在网上看到要找电脑手机连的同一个wifi的ip地址还要把ip地址放到package.json里的dev中–host ip什么的放到我这还不好用，突然想到以前视频课中vuecli介绍的时候，加载完成命令行返回两条地址数据，一条是本地打开的地址，另一条是连什么来着忘了，也没用过，在绝望之际，通过复制粘贴一系列操作在手机的微信上打开了第二条数据地址
结果就看到了手机上的项目。。哈哈哈意外之喜，发现放到手机上确实有问题。。。。
因为我这是用的json没有后端提供的数据接口，一些问题反而没爆露出来，手机端的问题就是，评论功能电脑上用的localStorage存储，可是手机上也没有啊，所以评论功能出了问题，
其余还没什么问题，然后我换在浏览器中查看，结果浏览器设置的护目色背景将我设置的白色背景弄没了，一些图片白边与白色背景重叠看不出来，放到浏览器上就暴漏出来了，不过评论功能的存储恢复了，应该是浏览器有localStorage，微信打开没有。继续
商品页用的弹性布局，两侧有空余自动填充，所以:
感觉还挺有特色的，就这样把，进入商品列表显示9个商品，点击下面加载更多，显示另一页，用mui加一个加载动画，一共就设置两页商品，设置获取数据添加到原有数据中，这样加载新数据后原先的数据还在
getGoods(){
this.axios.get("/static/json/goods/goods"+this.id+".json")
.then(res=>{
this.list = this.list.concat(res.data);
})
}
商品详情页
点击商品进入商品对应的信息组件，这里
路由的两种导航方式
1,标签的形式：router-link点击跳转
2,js的形式：“编程式导航”利用this.￥router属性，该属性是一个导航对象，利用它可以方便的使用js代码实现路由的前进，后退，跳转到新的URL地址。例如this.$router.push("/home/goodsinfo"+id)
而且$router属性中有一个属性叫go()，在go中传-1，就是让路由退回上一个，像history功能相似，能保存历史记录的意思，利用它来进行返回功能。
商品详情这里用js点击跳转更方便点，点击的时候能过获取对应的index，进行数组的操作和路由参数的设置
购物车小球动画可以加个贝塞尔曲线，效果更佳
el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
vue页面滚动监听
window.addEventListener('scroll', this.getScroll)
小球加入购物车，为防止页面下滑滚动，写死的小球动画终点，不合适，添加，点击添加时获取当前页面滚动距离，加给原来的值上，
enter(el,done){//动画
el.offsetWidth;
el.style.transform = "translate(82px,"+this.scrolltop+"px)";
el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
done();
},
addCar(){//点击时获取滚动距离，添加到原先的距离上
this.isActive = true;
this.scrolltop = 198;
this.scrolltop = this.scrolltop+document.documentElement.scrollTop || document.body.scrollTop;
}
到这才发现自己想的挺好，实际上由于手机的分辨率不同，屏幕的宽度也有所不同，横屏怎么去获取宽度，获取了也不好操作，不过视频里用的方法不错：
原生js有个方法叫
getBoundingClientRect()
getBoundingClientRect()
这个方法返回一个矩形对象，包含8个属性：left、top、right和bottom，以及width和height
.在ie7及ie7以下left和top会多出两个像素。
注意
获取小球出发点的坐标时遇到两个问题：
1，点击时获取小球的绑定的ref，显示undefined，因为当前小球用的v-if，点击的瞬间，可能浏览器没反应过来呢，
解决：把v-if控制小球出现，换成v-show控制小球的隐藏，这样小球始终在dom中就能找得到他
2，点击时打印小球的getBoundingClientRect()对象，显示每个值都为0，
原因：点击的时候获取不到，小球开始运动的时候才能获取到数据，不到为啥
在小球点击时获取不到，在beforeEnter时也获取不到，只能在enter阶段获取了，
解决：把获取小球的位置的代码放到小球enter阶段，可真正获取的坐标
以后就频繁的用到vuex，vuex能极大的简化组件之间传值的操作，
同步购物车
将加入购物车的商品添加到本地存储localStorage中，然后将信息放到vuex的state中叫car的存放所有加入购物车中商品的所需信息，所谓所需就是在购物车中展示的id，title，url，price，count，选中状态，。。好像没有用不到的，在添加时要注意，检查在添加动作之前，购物车中是否有商品，如果没有直接添加，如果有，则判断要添加的商品和已存在的商品是否是同一个商品，如果是则将原来的商品的信息中的数量加上此次提交的数量，然后再购物车组件中通过调用vuex中car中的信息渲染购物车的卡片，
购物车中进行商品数量加减
购物车商品卡片中有商品控制数量加减按钮，要将加减的操作影响到localStorage中的数据，这样下次刷新，做出更改的地方不会复原，都是利用vuex，在vuex中的mutations中定义方法，在组件中调用方法来实现数据更改，组件不能直接更改vuex中的数据，
购物车中的删除功能
删除功能也是需要调用在vuex中定义的方法，这样大部分的数据操作都用到了vuex，确实是起到了极大的简化代码思路，使逻辑写起来轻松许多，如果没有vuex估计要很麻烦。
删除也要从localStorage中删，通过vuex中的方法。找到点击的商品的id，传给vuex中的方法，vuex中的方法some循环找到点击商品的信息，配合改信息的index，用splice在localStorage中删除这一项
购物车中选中按钮
原先使用mui中的按钮，动画还不错，不到为毛不好用，这个框架净是坑，要拉啊，我还用他家的编译器呢，哼哼，自己手写一个选中按钮，用一个div中间一张图片，在点击商品时，多传一条信息，叫select意思就是选择，默认是none，然后在购物车商品卡片中的选择框的身上绑定一个display样式。默认是传入的none，在点击按钮时判断按钮当前display属性，如果时none就改成block，如果是block就改成none，
购物车底部结算区域
结算区只显示两条信息，一条是选中的商品的总数，一条是总金额，商品总数通过遍历当前购物车中所有商品中选中按钮display为block的商品的总数，通过vuex中的getters显示，类似计算属性，只要依赖数据发生变化，该属性就会做出响应，总金额同样是遍历所有display为block商品的数量*它们的价格，然后返回出去，就欧克了。
安装一个firefox开发板康康