摘要：一個基于全家桶開發的仿知乎日報單頁應用項目地址源碼地址項目在線地址在線地址模式下推薦使用移動端模式瀏覽去觀看如果覺得做得還不錯或者項目源碼對您有幫助希望您小抬右手到右上角點一個您的支持是作者長期更新維護的動力項目起源從二月份開始學習學習了

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就是對我的莫大鼓勵