vue仿卷皮折扣App

vue项目实战

简述

　今天逛论坛，看到一个帖子，也被发帖者提到的问题所干扰。 每当学习新的东西，感觉自己学会了就匆匆看下一个知识点。结果就导致没过多久刚学过的知识点就忘记了，还要重新学习。这种效率看起来很低。为了避免这个问题决定采取帖子中的方法，开通一个个人博客，将自己平时项目中的问题加以终结，巩固学到的东西。
　今天要将的东西是我将前几天学习vue中所做的demo案例中碰到的问题、以及解决的办法写出来做个总结 。　　
　

项目名称–仿卷皮折扣APP

　1.首页顶部列表的滑动效果 为了加快开发效果我使用了vux ui,不要和vuex混淆。vux是将we-ui中的一些开发场景中的组件重构成vue组件。使用改组件可以加快开发速度，滑动切换我采用了vux中的tab以及swiper组件，后来发现每个swiper-item 中还有一个轮播图，于是我在每个swiper-item中又引入了swiper组件，当组件引进去之发现滑动到下一页时候，页面找不到了，当滑动轮播图时候，轮播图所在的页面被切换到下一页。通过F12查看源代码发现 translate中的X坐标都是变化很大，每次变化1000px，当然就出现我前面提到的问题我猜测是swiper组件嵌套组件组件时，组件使用相同的类名，导致translate 的值成倍增长。
　　后来我将轮播图换成X-swiper组件 ，结果出现了新的问题，每次滑动轮播图时最外层的swiper也跟着滑动了，后来尝试着将轮播图的z-index设置最高，问题依然存在。百度，google无果后我决定采用路由切换的方式，给路由切换加一个动画也行，通过滑动屏幕触发router.go()。 　　
2. 使用vue-resource的$http.get()无法获取本地json 文件
　 每次GET请求提示文件找不到，感觉可能是路径不正确吧，但是使用hbuilder打开index.html 将地址改为我在vue设置的json地址，发现能够访问到。可能是端口设置不正确？。我又将webpack中的地址和端口改成localhost:8020，结果出现跨域问题。折腾了一晚上还是没折腾出来。第二天我看到使用vue-cli脚手架中自动生成的目录里面有一个static目录用于放静态资源，之前我都把静态资源放到assets目录下，我的json是放到src文件夹自己建的data文件夹下的。我之前也尝试将文件放到其他的文件夹下，都已失败告终。当我把json文件放到static目录下时，奇迹出现了json 数据获取到了。到现在也不知道是为什么，放到static中才能访问。 我猜可能是webpack问题。
3. 路由切换的动画的问题
　使用路由切换时总是提示一个问题，大概意思就是动画失效，因为您切换的是一个片段实例。当时百度发现没有人提到这个问题，查看官方ａｐｉ也没发现问题所在，后来发现有几个页面切换有动画效果，对比后才明白错误的原因。因为我的每个view中引入了组件却没有将组件用一个ｄｉｖ包裹，后来每个view我都用一个div包裹起来问题就迎刃而解了。

总结

　这个项目暂时还未完善，等完善后我会将整个项目开源，供大家学习。另 vux中的组件是学习vue的一个很好的资源。尝试书写自己的组件能够快速提高自己的水平。