php 仿⼩红书,vue 仿⼩红书个⼈开源项⽬⼩红书，发现全世界的好东西! 种草种的好，美得⽐⼈早!
在线预览
点我有惊喜哦
(PC端建议在Chrome下开启调试模式，移动端直接在浏览器中打开就好)
项⽬描述
技术栈
Vue2.0全家桶 + axios + Vuex + Mint-Ui + Mock.js + Stylus
主要依赖
使⽤vue-cli2.0搭建项⽬框架
使⽤vue-router2.7进⾏页⾯路由切换
使⽤json server进⾏http请求获取数据
mock假数据存储在本地
使⽤stylus编写样式
vuex进⾏状态管理
better-scroll优化滚动效果
vue-awesome-swiper轮播图
flexible.js 10rem解决移动端设备兼容
主要实现的功能
⾸页
1、tabbar滑动切换和点击切换
2、搜索框
3、笔记列表的⾃适应布局
4、良好的滚动⼿感
5、侧边栏的进⼊退出
笔记页
1、滑动查看笔记图⽚
2、笔记详情展⽰
商品页
1、滑动查看商品图⽚
2、商品详情展⽰
3、加⼊购物车的上拉弹出框，选择商品颜⾊、尺⼨、重量及数量
购物车
1、已加⼊购物车的商品展⽰
2、增加、减少商品数量，删除商品
3、结算功能
待实现功能
1、搜索功能
2、评论页⾯的展⽰
3、笔记页⾯的完善
项⽬总结(所踩过的坑！！)
历时半个多⽉的敲代码过程，终于完成了这款仿⼩红书的项⽬(有点⼩开森~)。项⽬使⽤到vue-router进⾏路由切换，组件化开发让我更加具有组件化思维，vuex的状态管理模式，采⽤集中式存储管理应⽤的所有组件的状态，并以相应的规则保证状态以⼀种可预测的⽅式发⽣变化。项⽬所⽤到的假数据为⼩红书官⽹上的⼀些数据，以及⼩红书app上的截图(⼩红书没有PC端商品图⽚，只好默默抠图...)。作为⼀名vue的初学者，开发过程中难免踩过⼀些坑，⼀开始并没有⽤到mint-ui这个移动端布局框架，打算⾃⼰⼿写⼀个侧边栏，尝试许久，效果总不如⼈意，然后果断放弃，投⼊mintui的怀抱，嗯，效果蛮不错的。还有不想在路由中看到#，路由⽂件中我选择了history模式，结果打包上线时...你懂的，总之开发过程就是填坑过程，期间遇到的⼀些问题通过查看官⽹⽂档，浏览社区⼤⽜的技术分享，最后总能解决的。
最后
⾛过路过的各位⼤佬们，如果觉得我的项⽬还不错的，就请动动你们的⼩⼿，留下⼀颗宝贵的星吧~
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run devphp初学者项目
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。