首次踏入vue坑——閱讀zhihudaily-vue源碼

以前用的技術棧都是yeoman上找的webpack+react的腳手架，第一次看vue項目的源碼。
感受一個vue文件裏包含html模板、對應JS和樣式的組合方式，使得組件化更加明顯，也下降了平時項目中的小文件數量。
相比於react的JSX，使用在原生標籤裏插入屬性和一些模板表達式來展現數據，顯得簡潔了許多。
整體感受，更小巧，更簡潔。
還有跟react有顯著不一樣的是，vue中使用原生js很方便，對dom的操做也很方便，因此在不少react很棘手的問題上，vue明顯方便了不少。

此項目的移動設備匹配方案使用的是淘寶的flexible方案，根據設備動態在html加入dpr和font-size屬性，而且在webpack裏自定義vue做爲loader，使用以下的配置

postcss: [require('postcss-px2rem')({
  baseDpr: 1,             // base device pixel ratio (default: 2)
  threeVersion: false,    // whether to generate @1x, @2x and @3x version (default: false)
  remVersion: true,       // whether to generate rem version (default: true)
  remUnit: 37.5,            // rem unit value (default: 75)
  remPrecision: 3         // rem precision (default: 6)
})],

其中dpr和rem是flexible相應的概念，能夠參考淘寶出的flexible手冊進行了解。
進行了上述配置之後，就能夠在css裏隨意寫px，而後會自動轉換成rem值並進行多設備的匹配工做了。

項目還依賴了fastclick庫，其github說明爲
FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.
整體來講就是讓應用在移動端的體驗更加優化，讓點擊從300ms左右的click動做變爲50~100ms的touchend動做，還解決了點透問題。連接：http://www.cnblogs.com/yexiao...

項目中的各類小圖標是使用阿里巴巴的fonticon解決方案（http://www.iconfont.cn/）來實現的，只要在scss裏定義一個font family

font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1467357626_5109937.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1467357626_5109937.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_1467357626_5109937.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/font_1467357626_5109937.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_1467357626_5109937.svg#iconfont') format('svg'); /* iOS 4.1- */

載入阿里CDS下的各個字體，就可使用相似的方式來調用一個個小圖標了。

項目首頁展現的swiper裏的圖像都經過一個簡單的正則表達式，被重定向到了https://images.weserv.nl/?url=這一網址，該網址的說明爲
Images.weserv.nl is an image cache & resize proxy. Our servers resize your image, cache it worldwide, and display it.
不是特別懂這一步的意義在哪。緩存圖像？統一大小？

整個通篇看下來是個各組件各自爲戰的小型webapp，不少功能都缺打磨，組件之間不多看到數據傳遞，都是本身調用ajax來獲取本身所須要的數據並展現出來，經過vue-router構建單頁應用，也沒有統一的狀態管理和單向數據流（相似redux），不太小而美原本就是vue的訴求吧。