使用Vue寫一個cnodejs社區的webapp以後的反思

前言

終於抽出了時間來完成我這個斷斷續續的項目了，當時最開始是想作一個知乎日報webapp的，不過因爲API跨域和圖片的跨域問題，當時處理起來不順手，就改作cnode的了，由於官方提供了API同時也容許跨域，真的是很是感謝cnodejs社區提供的API

反思一 組件重用

當時拿到API以後直接開始擼起了首頁，當時以爲也就幾個頁面就能完成，頁面太多的細分組件，徹底按照頁面去完成的，不過當寫的到後面發現，有很多地方均可以提取出來做爲組件去調用的。好比主題的列表展現，評論以及我的中心的主題等。當拿到一個項目以後應先花寫時間去找找哪有類似的地方，將其提取出來作成組件去調用。

反思二 樣式文件

起初是按照組件和模板的方式，將樣式文件寫在了vue文件中。因爲以前看過大漠的文章介紹過postcss，因而在此次項目中一開始使用了postcss去寫樣式，由於其中的next插件可讓咱們使用css4中的一些特性去實現某些樣式。好比變量，組件化，顏色函數等。寫了一些後發現將樣式混入到組件中確實看起來很方便，可是當我定義變量，進行導入時，發現並非很順手，並且postcss的使用也並無帶給我超越scss的體驗。權衡了利弊以後便切換回了scss，並將文件所有提取到一個文件夾中進行組件化管理。帶個個人方即是能夠分離來寫樣式和結構，也能夠進行一些主題的更改。不即是當要更改一個組件時，我可能改完vue還要去找scss。至於那種方便，應該是仁者見仁，或是根據項目需求了吧。

反思三 組件間的數據傳遞

首先用戶的登陸信息無疑是要保存在官方的狀態管理vuex中了，固然爲了保存也要存在localStorage中了。父級組件向下傳遞使用prop。而頭部標題欄，側滑菜單和回覆評論時的顯示隱藏上，狀態的切換。由於都是作成了組件，而數據傳遞時首先想到了放到vuex中，經過getter去獲取狀態的變化。而評論框的顯隱採用的是子組件向父組件經過$emit傳遞事件，從而達到關閉其餘評論框的目的。

反思四 數據保存還原

因爲是單頁應用，而數據則是來自ajax，當頁面切換時，數據應該用去主動獲取數據並渲染，而當頁面回退時，應該回到上次瀏覽的位置，而這個功能vue-router提供了方法。然而數據的保存應該如何去作呢，當時還沒想好解決方案，留待慢慢研究下。

反思五 後端渲染ssr

前端的數據均來自ajax的話，那麼初次加載時便要去請求數據，影響了相應時間和SEO，而如今Vue ssr 的技術也愈來愈成熟，Vue2.3將ssr的有了很大的性能提示。那麼下一個目標即是將項目升級爲後端渲染！

最後

項目地址
在線瀏覽