vue全家桶 仿小红书开源项目

3,350 阅读1分钟

项目依赖

  • 使用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