项目依赖
- 使用vue-cli2.0搭建项目框架
- 使用vue-router2.7进行页面路由切换
- 使用json server进行http请求获取数据
- mock假数据存储在本地
- 使用stylus编写样式
- vuex进行状态管理
- better-scroll优化滚动效果
- vue-awesome-swiper轮播图
- flexible.js 10rem解决移动端设备兼容
效果演示
项目github地址: 项目请戳这
预览地址: 预览请戳这
项目总结
项目使用到vue-router进行路由切换,组件化开发让我更加具有组件化思维,vuex的状态管理模式,项目所用到的假数据为小红书官网上的一些数据,以及小红书app上的截图。踩过一些坑,vue-awesome-swiper实现图片轮播时,选择free模式时不能改变swiper-item之间的距离,卡顿许久,通过仔细阅读官方文档才发现还有这个选项spaceBetween,果然要多看文档;打包后的文件index.html出现空白页,通过浏览社区大牛的文章,才知道需要关闭路由文件的history模式。
若是觉得文章还不错不妨点个赞吧~~
欢迎star,欢迎issue