vue仿lofter移動端demo

wwolf 發(fā)布于2019-08-21 17:12 / 2805人閱讀

摘要：遇到問題時一定要去閱讀文檔，可以發(fā)現使用時遺漏或者沒有注意的地方。打包文件時也要注意修改路徑不然就踩坑了。

vue_lofter

一個仿lofte手機端的vue項目

項目描述 技術棧

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

預覽效果

?預覽地址(PC端建議在Chrome下開啟調試模式或移動端瀏覽)
?源碼地址??求你的小星星～

主要依賴

Vue2.0 前端頁面展示

Stylus css預編譯

Axios 異步數據的請求

flexible.js 解決移動端設備兼容

better-scroll 優(yōu)化滾動效果

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的狀態(tài)管理模塊，統(tǒng)一的狀態(tài)的管理，讓我們更好的去對數據操作，對axios的跨域問題有了更深了解。遇到問題時一定要去閱讀文檔，可以發(fā)現使用時遺漏或者沒有注意的地方。打包文件時也要注意修改路徑不然就踩坑了?_?。當然這個項目還有些功能沒有實現，后續(xù)會進行完善的

最后

　　走過路過的各位大佬們，如果覺得我的項目還不錯的，就請動動你們的小手，留下一顆寶貴的星??吧~
本人18屆畢業(yè)生，目前正在求職，對我感興趣的可以通過以下方式聯系我:

郵箱：1047429135@qq.com

微信號：zzzrrr716

云服務器 GPU云服務器環(huán)信語音聊天vue demo vue 集成webrtc實時音視頻demo webrtc pc端 demo lofter

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89253.html

Vue2.0全家桶仿騰訊課堂（移動端）

摘要：最近在學習覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續(xù)更新中。的使用的狀態(tài)存儲是響應式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態(tài)。最近在學習vue,覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正（持續(xù)更新中）。效果預覽 ?在線預覽：點我！！！在線預覽，手機瀏覽或切換瀏覽器移動調試 ?源碼地址：Github??求你的小星星～...

zorro 2019-08-29 12:48 評論0 收藏0
Vue2.0全家桶仿騰訊課堂（移動端）

摘要：最近在學習覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續(xù)更新中。的使用的狀態(tài)存儲是響應式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態(tài)。最近在學習vue,覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正（持續(xù)更新中）。效果預覽 ?在線預覽：點我！！！在線預覽，手機瀏覽或切換瀏覽器移動調試 ?源碼地址：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 構建使用全家桶實現音樂播放器等

摘要：這邊忙完了會首先把滾輪實現思路跟大家講一下滾輪實現思路展示音樂播放器優(yōu)化滾輪性能優(yōu)化自定義指令自定義先上最終效果地址 PC 開啟手機瀏覽器模式從vue2.0 開始接觸，然后一邊看官網教程一邊寫demo，主要實現以下 PC端時間選擇插件【涉及 props， watch， mounted,transaction內置組件和組件開發(fā)熟悉】 demo 移動端仿IOS滾輪時間選擇 ...

netScorpion 2019-08-20 14:46 評論0 收藏0