基于Vue2.0仿lofter移动端Demo

96
zzr716
2017.10.24 10:46* 字数 441

一个仿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)
    }
  ]
})

效果图

lu.gif

lu1.gif

lu2.gif

lu3.gif

待完善功能

  • 用户登录退出的实现
  • 关注用户内容出现在关注页
  • 评论的增加等
  • 滑动效果

项目总结

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

最后

走过路过的各位大佬们,如果觉得我的项目还不错的,就请动动你们的小手,留下一颗宝贵的星✨✨吧~
本人18届毕业生,目前正在求职,对我感兴趣的可以通过以下方式联系我:

日记本
Web note ad 1