vue仿lofter移動端demo

時間 2019-11-10

標籤 vue lofter 移動 demo 欄目無線简体版

原文原文鏈接

vue_lofter

一個仿lofte手機端的vue項目css

項目描述

技術棧

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

預覽效果

?預覽地址(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)
    }
  ]
})

效果圖

待完善功能

用戶登陸退出的實現
關注用戶內容出如今關注頁
評論的增長等
滑動效果vue

項目總結

　歷時半個多月的敲代碼過程，終於完成了這款仿lofter的項目，經過這個項目熟悉了對Vue2.0的使用，在項目中使用vuex的狀態管理模塊，統一的狀態的管理，讓咱們更好的去對數據操做，對axios的跨域問題有了更深瞭解。遇到問題時必定要去閱讀文檔，能夠發現使用時遺漏或者沒有注意的地方。打包文件時也要注意修改路徑否則就踩坑了¬_¬。固然這個項目還有些功能沒有實現，後續會進行完善的ios