資訊專欄INFORMATION COLUMN
摘要：遇到問題時一定要去閱讀文檔，可以發(fā)現(xiàn)使用時遺漏或者沒有注意的地方。打包文件時也要注意修改路徑不然就踩坑了。
vue_lofter
項目描述 技術(shù)棧一個仿lofte手機端的vue項目
Vue2.0全家桶 + axios + Vuex + Mint-ui + Mock.js + Stylus
預(yù)覽效果?預(yù)覽地址(PC端建議在Chrome下開啟調(diào)試模式或移動端瀏覽)
?源碼地址??求你的小星星～
Vue2.0 前端頁面展示
Stylus css預(yù)編譯
Axios 異步數(shù)據(jù)的請求
flexible.js 解決移動端設(shè)備兼容
better-scroll 優(yōu)化滾動效果
Mint-ui 移動端組件庫
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)
}
]
})
效果圖
用戶登錄退出的實現(xiàn)
關(guān)注用戶內(nèi)容出現(xiàn)在關(guān)注頁
評論的增加等
滑動效果
最后歷時半個多月的敲代碼過程，終于完成了這款仿lofter的項目，通過這個項目熟悉了對Vue2.0的使用，在項目中使用vuex的狀態(tài)管理模塊，統(tǒng)一的狀態(tài)的管理，讓我們更好的去對數(shù)據(jù)操作，對axios的跨域問題有了更深了解。遇到問題時一定要去閱讀文檔，可以發(fā)現(xiàn)使用時遺漏或者沒有注意的地方。打包文件時也要注意修改路徑不然就踩坑了?_?。當然這個項目還有些功能沒有實現(xiàn)，后續(xù)會進行完善的
走過路過的各位大佬們，如果覺得我的項目還不錯的，就請動動你們的小手，留下一顆寶貴的星??吧~
本人18屆畢業(yè)生，目前正在求職，對我感興趣的可以通過以下方式聯(lián)系我:
微信號：zzzrrr716
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89253.html
摘要：最近在學(xué)習(xí)覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續(xù)更新中。的使用的狀態(tài)存儲是響應(yīng)式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態(tài)。 最近在學(xué)習(xí)vue,覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正（持續(xù)更新中）。 效果預(yù)覽 ?在線預(yù)覽：點我！??！在線預(yù)覽，手機瀏覽或切換瀏覽器移動調(diào)試 ?源碼地址：Github??求你的小星星～...
摘要：最近在學(xué)習(xí)覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正持續(xù)更新中。的使用的狀態(tài)存儲是響應(yīng)式的。需要注意類似于，不同在于提交的是，而不是直接變更狀態(tài)。 最近在學(xué)習(xí)vue,覺得超好用，忍不住自己仿了個騰訊課堂練練手，不當之處還請大家指正（持續(xù)更新中）。 效果預(yù)覽 ?在線預(yù)覽：點我?。?！在線預(yù)覽，手機瀏覽或切換瀏覽器移動調(diào)試 ?源碼地址：Github??求你的小星星～...
摘要：仿網(wǎng)易云課堂在線預(yù)覽手機瀏覽或切換谷歌瀏覽器移動調(diào)試預(yù)覽描述前端部分快速構(gòu)建前端界面輪播圖，滑塊管理現(xiàn)非父子組件之間的通信移動設(shè)備兼容使用實現(xiàn)預(yù)編譯實現(xiàn)所有小圖標的加載，減少請求路由懶加載結(jié)合異步組件和的做請求存儲用 Vue-wyclass 仿網(wǎng)易云課堂App 在線預(yù)覽：手機瀏覽或切換谷歌瀏覽器移動調(diào)試 Gif預(yù)覽 showImg(https://segmentfault.com/i...
摘要：這邊忙完了會首先把滾輪實現(xiàn)思路跟大家講一下滾輪實現(xiàn)思路展示音樂播放器優(yōu)化滾輪性能優(yōu)化自定義指令自定義 先上最終效果地址 PC 開啟手機瀏覽器模式 從vue2.0 開始接觸，然后一邊看官網(wǎng)教程一邊寫demo， 主要實現(xiàn)以下 PC端 時間選擇插件 【涉及 props， watch， mounted,transaction內(nèi)置組件 和組件開發(fā)熟悉】 demo 移動端 仿IOS滾輪 時間選擇 ...
閱讀 2328·2021-11-24 10:33
閱讀 1392·2019-08-30 15:43
閱讀 3285·2019-08-29 17:24
閱讀 3495·2019-08-29 14:21
閱讀 2233·2019-08-29 13:59
閱讀 1746·2019-08-29 11:12
閱讀 2820·2019-08-28 18:00
閱讀 1860·2019-08-26 12:17
