failry/vue-smzdm

Vue仿什么值得买

vue-smzdm

Vue仿什么值得买

演示DEMO

前言

平时从张大妈（ZDM）褥羊毛褥多了，正好用vue做了这个练手项目。

由于获取真实数据有限，所以项目并没有全部完成，仅限基本功能。

技术栈

• vue-cli脚手架(vue + vuex + vue router + es6)
• axios、jsonp
• better-scroll、vue-lazyload
• normalize.css

完成功能

• 首页
• 商品列表页
• 商品详情页
• 文章列表页
• 分类页
• 优惠券页
• 下拉加载数据
• 导航高亮滚动
• 轮播图

排坑记录

2018.5.4

1、问题：使用 <router-link> 组件应用导航的时候，匹配的路径会显示 router-link-exact-active 和 router-link-active 两个类名。其中 router-link-exact-active 为精准匹配的时候才显示。而内页导航要显示高亮的时候，会匹配到 / 这个路径。

解决：单独拎出首页链接，额外增加一个属性 exact 显示为 <router-link to="/" exact>，这个链接只会在地址为 / 的时候被激活。只需要给 router-link-active 额外增加高亮样式。

---

2、问题：增加商品列表页及嵌套路由的时候，需要响应路由参数的变化，例如从 /youhui 导航到 /haitao，原来的组件实例 list 会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

解决：可参照官方文档vue-router数据获取

2018.5.10

3、问题：使用better-scroll做导航横向滚动的时候，发现根本滚动不了。

解决：横向滚动的时候，相比纵向滚动一定要动态的计算滚动区的宽度。

2018.5.14

4、问题：做导航高亮滚动的时候，使用better-scroll的 scrollTo 方法无效？

解决：给方法加 setTimeout 延迟执行，等节点加载完成和this.scroll 创建之后，才可以使用 scrollTo 方法。

---

5、问题：vue-cli 3.0配置webpack目录别名alias?

总结

学习是一方面，自己动手做是另一个样子，只有当自己遇到了问题，才会印象深刻些。

部署项目的时候，还遗留一个问题，就是获取图片的时候，axios 没有找到 pathrewrite 的API，暂时还不知道怎么解决。

谢谢您的品读:blush:，此处抛砖引玉，希望大家共同探讨学习。