Vue2.0—仿知乎日報總結

Vue-News

一個基於vue全家桶開發的仿知乎日報單頁應用

項目github地址:源碼地址

項目在線地址:在線地址 (PC模式下推薦使用chrome移動端模式瀏覽去觀看)

若是以爲作得還不錯 , 或者項目源碼對您有幫助 , 但願您小擡右手到右上角點一個star , 您的支持是做者長期更新維護的動力^_^

項目起源

從二月份開始學習vue學習了一個半月後去跟着滴滴黃軼老師學習他的Vue.js高仿餓了麼外賣App課程,作完後收穫頗豐，對vue的實際項目應用有了基本的瞭解,同時也學習到了移動端佈局，例如flex,1px邊框,正方形背景圖等等,作完整個課程後決定本身再去作一個小東西去加深鞏固vue知識數,所以又花了數天去閱讀vuex,vue-router,axios,以及餓了麼前端團隊開發的mint-ui,最後在博哥的推薦下選擇了仿知乎日報做爲獨立demo的prototype,緣由嗎很簡單，標準的單頁面應用，沒有太多複雜的交互效果，以及現成的api接口,而後,就開工啦！

項目劃分

項目主要劃分爲7個頁面模塊

首頁 (HomePage)，收藏頁(Collect)，新聞詳情頁(NewDetail)，評論頁(Comments)，主題新聞頁(ThemeDetail)，主編列表頁(EditorsList)和主編我的頁(Editor)

以及

側邊欄(Sidebar)，滑動圖(Swipe)，新聞列表頁(HomePageDetail)，詳情頁底部工具欄(BottomMenu)，頭部(Header)，子頁面頭部(SonHeader)

項目技術總結

除了使用到mint-ui,axios，vue-router這些組件庫和插件之外，還有一個很是重要的vuex，全部非父子組件通訊，甚至部分父子組件通訊都使用到他，到後期解決bug第一時間想到的也是採用vuex解決

上面的截圖就是我定義的所有狀態，7個頁面定義了將近30個狀態，作到了非父子組件須要用同一種狀態可是又不互相影響的效果

全部源碼歡迎到個人github察看，也歡迎各位點一個Star，你的一個star就是對個人莫大鼓勵