当前位置: 首页 > Web前端 > HTML5

vue仿lofter移动端demo

时间:2023-04-04 23:15:54 HTML5

vue_lofter是一个vue项目仿lofte移动端项目描述技术栈Vue2.0全家桶+axios+Vuex+Mint-ui+Mock.js+Stylus在Chrome中开启调试模式或者浏览mobile)?源码地址??求求你的小星星~主要靠Vue2.0前端页面展示Styluscss预编译axios异步数据请求flexible.js解决移动设备兼容问题better-scroll优化滚动效果Mint-ui移动组件库模拟数据托管路由结构importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',component:resolve=>require(['@/pages/found/index'],resolve),redirect:'/found/page1'},{路径:'/found',名称:'found',组件:resolve=>require(['@/pages/found/index'],resolve),meta:{keepAlive:true},children:[{path:'',component:resolve=>require(['@/pages/found/index'],resolve)},{path:'page1',name:'page1',component:resolve=>require(['@/pages/found/recommend'],resolve)},{path:'page2',名称:'page2',组件:resolve=>require(['@/pages/found/animal'],resolve)},{路径:'page3',名称:'page3',组件:resolve=>require(['@/pages/found/movie'],resolve)},{路径:'page4',名称:'page4',组件:resolve=>require(['@/pages/found/travel'],resolve)},{path:'page5',name:'page5',组件:resolve=>require(['@/pages/found/food'],resolve)},{path:'page6',name:'page6',component:resolve=>require(['@/pages/found/pen'],resolve)},{路径:'page7',name:'page7',component:resolve=>require(['@/pages/found/photo'],resolve)}]},{路径:'/home',名称:'home',组件:resolve=>require(['@/pages/home/index'],resolve)},{path:'/message',name:'message',组件:resolve=>require(['@/pages/message/msg'],resolve)},{path:'/my',name:'my',component:resolve=>require(['@/pages/my/index'],resolve)}]})效果图待完善功能用户登录注销实现关注用户内容出现关注页面评论增加等onslide效果项目总结 敲了半个多月的代码,终于完成了这个类似lofter的项目。通过这个项目,我熟悉了Vue2.0的使用。我在项目中使用了vuex的状态管理模块,统一的State管理让我们可以更好的操作数据,对axios跨域问题也有更深刻的理解。遇到问题一定要看文档,找出自己在使用时遗漏或没有注意的地方。打包文件的时候也要注意修改路径不然会踩坑的?_?。当然本项目还有一些功能没有实现,后续会完善。最后,路过  的各位大佬,如果觉得我的项目还不错,请动动你们的小手,留下宝贵的一份。Star??吧~我是18年级的毕业生,目前正在找工作。如果您对我感兴趣,可以通过以下方式联系我:邮箱:1047429135@qq.com微信号:zzzrrr716