摘要：一個(gè)基于全家桶開發(fā)的仿知乎日報(bào)單頁應(yīng)用項(xiàng)目地址源碼地址項(xiàng)目在線地址在線地址模式下推薦使用移動(dòng)端模式瀏覽去觀看如果覺得做得還不錯(cuò)或者項(xiàng)目源碼對您有幫助希望您小抬右手到右上角點(diǎn)一個(gè)您的支持是作者長期更新維護(hù)的動(dòng)力項(xiàng)目起源從二月份開始學(xué)習(xí)學(xué)習(xí)了

Vue-News

一個(gè)基于vue全家桶開發(fā)的仿知乎日報(bào)單頁應(yīng)用

項(xiàng)目github地址:源碼地址

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

如果覺得做得還不錯(cuò) , 或者項(xiàng)目源碼對您有幫助 , 希望您小抬右手到右上角點(diǎn)一個(gè)star , 您的支持是作者長期更新維護(hù)的動(dòng)力^_^

項(xiàng)目起源

從二月份開始學(xué)習(xí)vue學(xué)習(xí)了一個(gè)半月后去跟著滴滴黃軼老師學(xué)習(xí)他的Vue.js高仿餓了么外賣App課程,做完后收獲頗豐，對vue的實(shí)際項(xiàng)目應(yīng)用有了基本的了解,同時(shí)也學(xué)習(xí)到了移動(dòng)端布局，例如flex,1px邊框,正方形背景圖等等,做完整個(gè)課程后決定自己再去做一個(gè)小東西去加深鞏固vue知識(shí)數(shù),因此又花了數(shù)天去閱讀vuex,vue-router,axios,以及餓了么前端團(tuán)隊(duì)開發(fā)的mint-ui,最后在博哥的推薦下選擇了仿知乎日報(bào)作為獨(dú)立demo的prototype,原因嗎很簡單，標(biāo)準(zhǔn)的單頁面應(yīng)用，沒有太多復(fù)雜的交互效果，以及現(xiàn)成的api接口,然后,就開工啦！

項(xiàng)目劃分

項(xiàng)目主要?jiǎng)澐譃?個(gè)頁面模塊

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

以及

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

項(xiàng)目技術(shù)總結(jié)

除了使用到mint-ui,axios，vue-router這些組件庫和插件以外，還有一個(gè)非常重要的vuex，所有非父子組件通信，甚至部分父子組件通信都使用到他，到后期解決bug第一時(shí)間想到的也是采用vuex解決

上面的截圖就是我定義的全部狀態(tài)，7個(gè)頁面定義了將近30個(gè)狀態(tài)，做到了非父子組件需要用同一種狀態(tài)但是又不互相影響的效果

所有源碼歡迎到我的github察看，也歡迎各位點(diǎn)一個(gè)Star，你的一個(gè)star就是對我的莫大鼓勵(lì)