vue仿lofter移动端demo

wwolf 发布于2019-08-21 17:12 / 2616人阅读

摘要：遇到问题时一定要去阅读文档，可以发现使用时遗漏或者没有注意的地方。打包文件时也要注意修改路径不然就踩坑了。

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

混合云服务器托管环信语音聊天vue demo vue 集成webrtc实时音视频demo webrtc pc端 demo lofter

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89253.html

Vue2.0全家桶仿腾讯课堂（移动端）

摘要：最近在学习觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正持续更新中。的使用的状态存储是响应式的。需要注意类似于，不同在于提交的是，而不是直接变更状态。最近在学习vue,觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正（持续更新中）。效果预览 ?在线预览：点我！！！在线预览，手机浏览或切换浏览器移动调试 ?源码地址：Github✨✨求你的小星星～...

zorro 2019-08-29 12:48 评论0 收藏0
Vue2.0全家桶仿腾讯课堂（移动端）

摘要：最近在学习觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正持续更新中。的使用的状态存储是响应式的。需要注意类似于，不同在于提交的是，而不是直接变更状态。最近在学习vue,觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正（持续更新中）。效果预览 ?在线预览：点我！！！在线预览，手机浏览或切换浏览器移动调试 ?源码地址：Github✨✨求你的小星星～...

anquan 2019-08-01 17:01 评论0 收藏0
Vue+mint-ui+flexible仿移动端App(网易云课堂)

摘要：仿网易云课堂在线预览手机浏览或切换谷歌浏览器移动调试预览描述前端部分快速构建前端界面轮播图，滑块管理现非父子组件之间的通信移动设备兼容使用实现预编译实现所有小图标的加载，减少请求路由懒加载结合异步组件和的做请求存储用 Vue-wyclass 仿网易云课堂App 在线预览：手机浏览或切换谷歌浏览器移动调试 Gif预览 showImg(https://segmentfault.com/i...

iOS122 2019-08-22 15:12 评论0 收藏0
基于vue-cli 构建使用全家桶实现音乐播放器等

摘要：这边忙完了会首先把滚轮实现思路跟大家讲一下滚轮实现思路展示音乐播放器优化滚轮性能优化自定义指令自定义先上最终效果地址 PC 开启手机浏览器模式从vue2.0 开始接触，然后一边看官网教程一边写demo，主要实现以下 PC端时间选择插件【涉及 props， watch， mounted,transaction内置组件和组件开发熟悉】 demo 移动端仿IOS滚轮时间选择 ...

netScorpion 2019-08-20 14:46 评论0 收藏0