Vue仿什么值得买
平时从张大妈(ZDM)褥羊毛褥多了,正好用vue做了这个练手项目。
由于获取真实数据有限,所以项目并没有全部完成,仅限基本功能。
- vue-cli脚手架(vue + vuex + vue router + es6)
- axios、jsonp
- better-scroll、vue-lazyload
- normalize.css
- 首页
- 商品列表页
- 商品详情页
- 文章列表页
- 分类页
- 优惠券页
- 下拉加载数据
- 导航高亮滚动
- 轮播图
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数据获取
3、问题:使用better-scroll做导航横向滚动的时候,发现根本滚动不了。
解决:横向滚动的时候,相比纵向滚动一定要动态的计算滚动区的宽度。
4、问题:做导航高亮滚动的时候,使用better-scroll的 scrollTo
方法无效?
解决:给方法加 setTimeout
延迟执行,等节点加载完成和this.scroll
创建之后,才可以使用 scrollTo
方法。
5、问题:vue-cli 3.0配置webpack目录别名alias?
学习是一方面,自己动手做是另一个样子,只有当自己遇到了问题,才会印象深刻些。
部署项目的时候,还遗留一个问题,就是获取图片的时候,axios
没有找到 pathrewrite
的API,暂时还不知道怎么解决。
谢谢您的品读:blush:,此处抛砖引玉,希望大家共同探讨学习。