基於vue2全家桶開發的匿名朋友圈及聊天應用

前言

學習了vue全家桶後一直想找個機會來寫一個完整一點的項目，此次學校舉辦的比賽就是一個很好的契機。因爲是本身瞎搞搞，因此寫起來比較爲所欲爲，沒有過多地從設計和產品的角度去思考。這個項目包括了圖片上傳、發佈匿名消息、點對點聊天等功能，算是一箇中規中矩的練手項目，適合剛接觸vue全家桶的同窗學習。

技術棧

vue2 + vuex + vue-router + webpack + websocket + es6/7 + fetch + sass

項目地址

demo預覽地址（建議使用chrome瀏覽器的手機模式瀏覽） github地址

項目經驗總結

1. 部署時使用了nginx的反向代理來實現跨域，同時開啓了gzip壓縮了靜態資源的體積大小。相關文章：反向代理、gzip。
2. 前端的佈局要適配不一樣的屏幕大小和各類高清屏。爲了解決這個問題我使用淘寶開源的Flexible方案。這個方案的原理是經過JS來檢測dpr並設置meta標籤，而後動態計算html標籤的font-size以肯定rem的基準值。因而在寫css佈局時就能夠使用rem單位來實現不一樣屏幕的適配了。
3. 若是使用vue自帶的組件間通訊api來處理數據的話，隨着項目的增大數據的來源就會變得難以追蹤。因此爲了更好地管理前端的數據，引入了vuex來處理不一樣組件間的數據共享。

寫在最後

若是發現代碼bug或有什麼問題，歡迎issue。若是你能從中學到些什麼，也歡迎點個star！