前言
學(xué)習(xí)了vue全家桶后一直想找個(gè)機(jī)會(huì)來(lái)寫一個(gè)完整一點(diǎn)的項(xiàng)目介衔，這次學(xué)校舉辦的比賽就是一個(gè)很好的契機(jī)剪勿。由于是自己瞎搞搞跟伏，所以寫起來(lái)比較隨心所欲撞芍，沒(méi)有過(guò)多地從設(shè)計(jì)和產(chǎn)品的角度去思考。這個(gè)項(xiàng)目包括了圖片上傳跨扮、發(fā)布匿名消息序无、點(diǎn)對(duì)點(diǎn)聊天等功能，算是一個(gè)中規(guī)中矩的練手項(xiàng)目衡创，適合剛接觸vue全家桶的同學(xué)學(xué)習(xí)帝嗡。
技術(shù)棧
vue2 + vuex + vue-router + webpack + es6/7 + fetch + sass
項(xiàng)目地址
demo預(yù)覽地址（建議使用chrome瀏覽器的手機(jī)模式瀏覽）
項(xiàng)目經(jīng)驗(yàn)總結(jié)
1.部署時(shí)使用了nginx的反向代理來(lái)實(shí)現(xiàn)跨域，同時(shí)開(kāi)啟了gzip壓縮了靜態(tài)資源的體積大小璃氢。相關(guān)文章：反向代理哟玷、gzip。
2.前端的布局要適配不同的屏幕大小和各種高清屏。為了解決這個(gè)問(wèn)題我使用淘寶開(kāi)源的Flexible方案巢寡。這個(gè)方案的原理是通過(guò)JS來(lái)檢測(cè)dpr并設(shè)置meta標(biāo)簽喉脖，然后動(dòng)態(tài)計(jì)算html標(biāo)簽的font-size以確定rem的基準(zhǔn)值。于是在寫css布局時(shí)就可以使用rem單位來(lái)實(shí)現(xiàn)不同屏幕的適配了抑月。
3.如果使用vue自帶的組件間通信api來(lái)處理數(shù)據(jù)的話树叽，隨著項(xiàng)目的增大數(shù)據(jù)的來(lái)源就會(huì)變得難以追蹤。所以為了更好地管理前端的數(shù)據(jù)谦絮，引入了vuex來(lái)處理不同組件間的數(shù)據(jù)共享题诵。
寫在最后
如果發(fā)現(xiàn)代碼bug或有什么問(wèn)題，歡迎issue层皱。如果你能從中學(xué)到些什么性锭，也歡迎點(diǎn)個(gè)star！
