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

Vue-News

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

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

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

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

項(xiàng)目起源

從二月份開(kāi)始學(xué)習(xí)vue學(xué)習(xí)了一個(gè)半月后去跟著滴滴黃軼老師學(xué)習(xí)他的Vue.js高仿餓了么外賣App課程,做完后收獲頗豐，對(duì)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ì)開(kāi)發(fā)的mint-ui,最后在博哥的推薦下選擇了仿知乎日?qǐng)?bào)作為獨(dú)立demo的prototype,原因嗎很簡(jiǎn)單，標(biāo)準(zhǔn)的單頁(yè)面應(yīng)用，沒(méi)有太多復(fù)雜的交互效果，以及現(xiàn)成的api接口,然后,就開(kāi)工啦！

項(xiàng)目劃分

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

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

以及

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

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

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

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

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