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 dev

# 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.

php仿小红书,vue仿小红书个人开源项目相关推荐

1个人，3个月业余时间，采用Flutter，居然仿写了一个淘宝电商开源项目
来源 | https://www.jianshu.com/p/194448388ce9 前言 Flutter现在如火如荼,Google也在大力推广,是到了学习Flutter的时候了,今天推荐一款用Fl ...
分享一套基于SpringBoot和Vue的企业级中后台开源项目，这个项目有点哇塞！
点击上方蓝字关注「程序员的技术圈子」今天圈子哥给大家分享一套很不错的企业级的开源项目,最近一直比较忙,所以一直没有写文章,但也是一直想着给大家分享一些有价值的东西,而项目经验可能对于很多的在校学生来 ...
bootstrap的表单验证 vue_分享几个基于Vue的UI库和开源项目
阅读本文大概需要 3.6 分钟. 题图:Evan You(尤雨溪)的工作室在编程的世界里,你遇到的 90% 问题,别人都遇到过,并且提供了比较优秀的解决方案.我们无需一行一行代码从零开始创建一个项目 ...
java仿qq思路_java仿QQ聊天软件OIM艰辛之路(开源项目)
既然QQ能仿ICQ, 咱java也来个仿QQ. 在我刚学完java后,就想做点什么项目锻炼下自己的技能.凑巧的是,我一个同样学java的朋友在做一个仿qq的项目,不过他做的实在太丑了. 然后他想让我也 ...
python 开源项目书_十大 Python 机器学习开源项目
1.Scikit-learn 用于数据挖掘和数据分析的简单而有效的工具,基于NumPy,SciPy和matplotlib,开源,商业可用的BSD许可证. Commits: 21486, Contrib ...
vue企业项目demo_基于SpringBoot和Vue的企业级中后台开源项目
简介: 项目简介 SpringBoot和Vue,前后端分离,我们开源一套漂亮的代码和一套整洁的代码规范,让大家在这浮躁的代码世界里感受到一股把代码写好的清流!同时又让开发者节省大量的时间,减少加班,快 ...
gin+vue的前后端分离开源项目
该项目是gin+vue的前后端分离项目,使用gorm访问MySQL,其中vue前端是使用vue-element-admin框架简单实现的: go后台使用jwt,对API接口进行权限控制.此外,Web页 ...
springboot jwt token前后端分离_基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目...
一.前言最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目,这里把它开源出来分享给有需要的小伙伴们功能很简单,单点登录,前后端动态权限配 ...
分享一套基于SpringBoot和Vue的企业级中后台开源项目，代码很规范！
简介 SmartAdmin由河南·洛阳 1024创新实验室团队研发的一套互联网企业级的通用型中后台解决方案!使用最前沿的前后台技术栈SpringBoot和Vue,前后端分离,我们开源一套漂亮的代码和一 ...
基于SpringBoot和Vue的企业级中后台开源项目
简介 SmartAdmin由河南·洛阳 1024创新实验室团队研发的一套互联网企业级的通用型中后台解决方案!使用最前沿的前后台技术栈SpringBoot和Vue,前后端分离,我们开源一套漂亮的代码和一 ...

php仿小红书,vue仿小红书个人开源项目

php仿小红书,vue仿小红书个人开源项目相关推荐

最新文章

热门文章