一個(gè)仿lofte手機(jī)端的vue項(xiàng)目

項(xiàng)目描述

技術(shù)棧

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

預(yù)覽效果

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

主要依賴

• Vue2.0 前端頁面展示
• Stylus css預(yù)編譯
• Axios 異步數(shù)據(jù)的請(qǐng)求
• flexible.js 解決移動(dòng)端設(shè)備兼容
• better-scroll 優(yōu)化滾動(dòng)效果
• Mint-ui 移動(dòng)端組件庫
• mock 數(shù)據(jù)托管

路由結(jié)構(gòu)

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

待完善功能

• 用戶登錄退出的實(shí)現(xiàn)
• 關(guān)注用戶內(nèi)容出現(xiàn)在關(guān)注頁
• 評(píng)論的增加等
• 滑動(dòng)效果

項(xiàng)目總結(jié)

?????歷時(shí)半個(gè)多月的敲代碼過程拟枚，終于完成了這款仿lofter的項(xiàng)目盗飒，通過這個(gè)項(xiàng)目熟悉了對(duì)Vue2.0的使用翅萤，在項(xiàng)目中使用vuex的狀態(tài)管理模塊驯妄，統(tǒng)一的狀態(tài)的管理因妙，讓我們更好的去對(duì)數(shù)據(jù)操作渤愁，對(duì)axios的跨域問題有了更深了解缰揪。遇到問題時(shí)一定要去閱讀文檔眨业，可以發(fā)現(xiàn)使用時(shí)遺漏或者沒有注意的地方竹握。打包文件時(shí)也要注意修改路徑不然就踩坑了?_?画株。當(dāng)然這個(gè)項(xiàng)目還有些功能沒有實(shí)現(xiàn)，后續(xù)會(huì)進(jìn)行完善的

最后

走過路過的各位大佬們，如果覺得我的項(xiàng)目還不錯(cuò)的谓传，就請(qǐng)動(dòng)動(dòng)你們的小手蜈项，留下一顆寶貴的星??吧~
本人18屆畢業(yè)生，目前正在求職续挟，對(duì)我感興趣的可以通過以下方式聯(lián)系我:

• 郵箱：1047429135@qq.com
• 微信號(hào)：zzzrrr716