摘要：用簡(jiǎn)單實(shí)現(xiàn)知乎日?qǐng)?bào)前言想用構(gòu)建知乎日?qǐng)?bào)原因很簡(jiǎn)單，作為一個(gè)小白很需要親手做個(gè)項(xiàng)目來(lái)提升提及以及更加深入了解，也希望這個(gè)小項(xiàng)目能給剛學(xué)習(xí)的同學(xué)一點(diǎn)啟發(fā)。

想用vue構(gòu)建知乎日?qǐng)?bào)原因很簡(jiǎn)單，作為一個(gè)vue小白很需要親手做個(gè)項(xiàng)目來(lái)提升提及以及更加深入了解vue，也希望這個(gè)小項(xiàng)目能給剛學(xué)習(xí)vue的同學(xué)一點(diǎn)啟發(fā)。

首先要找到知乎日?qǐng)?bào)的api，這里感謝 @izzyleung 總結(jié)的知乎日?qǐng)?bào)api以及說(shuō)明 因?yàn)樵瓉?lái)的api不支持跨域嘛，需要自己代理這些api并允許跨域，這里我只代理了8個(gè)接口，接口以及參見本項(xiàng)目github的readme。之后再用nginx來(lái)反向代理接口。

項(xiàng)目參考了vue官方提供的參考項(xiàng)目，使用了 vue-router 和 vue-resource 這兩個(gè)插件，并且使用了vue-cli 這個(gè)腳手架工具來(lái)搭建webpack項(xiàng)目。之后就可以正式開發(fā)了，UI我大致模仿了知乎日?qǐng)?bào)安卓客戶端的UI但是沒有實(shí)現(xiàn)其全部功能，以后會(huì)慢慢完善。對(duì)于vue的核心，組件部分，我這里寫了6個(gè)組件，分別是導(dǎo)航欄組件、側(cè)邊欄組件、主頁(yè)組件、輪播組件、主題列表組件、文章組件，考慮到要模仿客戶端UI，這里組件樣式全是用sass/css寫的。我這里偷懶，響應(yīng)式布局只寫了最外面的container在屏幕寬度大于640px時(shí)候?qū)挾日{(diào)整為640px并且水平居中，所以建議在手機(jī)或F12手機(jī)模式下瀏覽demo，另外由于采用了flex布局，請(qǐng)使用現(xiàn)代瀏覽器。之后就是規(guī)劃路由啦，然后做做簡(jiǎn)單的CSS3動(dòng)畫效果，demo就完工了，之后把demo上傳到我1M帶寬的小水管服務(wù)器上，靜態(tài)文件掛在七牛云上，解決。

（Tips：使用sublime的同學(xué)可以下載vue syntax highlight 這個(gè)插件來(lái)語(yǔ)法高亮.vue文件，但是，當(dāng)你把