vue仿lofter移动端demo

vue_lofter

一个仿lofte手机端的vue项目

项目描述

技术栈

Vue2.0全家桶 + axios + Vuex + Mint-ui + Mock.js + Stylus

预览效果

?预览地址(PC端建议在Chrome下开启调试模式或移动端浏览)
?源码地址✨✨求你的小星星～

主要依赖

• Vue2.0 前端页面展现
• Stylus css预编译
• Axios 异步数据的请求
• flexible.js 解决移动端设备兼容
• better-scroll 优化滚动效果
• Mint-ui 移动端组件库
• mock 数据托管

路由结构

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)


export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['@/pages/found/index'], resolve),
      redirect: '/found/page1'
    },
    {
      path: '/found',
      name: 'found',
      component: 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',
          name: 'page2',
          component: resolve => require(['@/pages/found/animal'], resolve)
        },
        {
          path: 'page3',
          name: 'page3',
          component: resolve => require(['@/pages/found/movie'], resolve)
        },
        {
          path: 'page4',
          name: 'page4',
          component: resolve => require(['@/pages/found/travel'], resolve)
        },
        {
          path: 'page5',
          name: 'page5',
          component: resolve => require(['@/pages/found/food'], resolve)
        },
        {
          path: 'page6',
          name: 'page6',
          component: resolve => require(['@/pages/found/pen'], resolve)
        },
        {
          path: 'page7',
          name: 'page7',
          component: resolve => require(['@/pages/found/photo'], resolve)
        }
      ]
    },
    {
      path: '/home',
      name: 'home',
      component: resolve => require(['@/pages/home/index'], resolve)
    },
    {
      path: '/message',
      name: 'message',
      component: resolve => require(['@/pages/message/msg'], resolve)
    },
    {
      path: '/my',
      name: 'my',
      component: resolve => require(['@/pages/my/index'], resolve)
    }
  ]
})

效果图

待完善功能

用户登陆退出的实现
关注用户内容出如今关注页
评论的增长等
滑动效果

项目总结

　历时半个多月的敲代码过程，终于完成了这款仿lofter的项目，经过这个项目熟悉了对Vue2.0的使用，在项目中使用vuex的状态管理模块，统一的状态的管理，让咱们更好的去对数据操做，对axios的跨域问题有了更深了解。遇到问题时必定要去阅读文档，能够发现使用时遗漏或者没有注意的地方。打包文件时也要注意修改路径否则就踩坑了¬_¬。固然这个项目还有些功能没有实现，后续会进行完善的

最后

　　走过路过的各位大佬们，若是以为个人项目还不错的，就请动动大家的小手，留下一颗宝贵的星✨✨吧~
本人18届毕业生，目前正在求职，对我感兴趣的能够经过如下方式联系我:

• 邮箱：1047429135@qq.com
• 微信号：zzzrrr716