摘要：之前用的技術(shù)棧都是上找的的腳手架，第一次看項目的源碼。感覺一個文件里包含模板對應(yīng)和樣式的組合方式，使得組件化更加明顯，也降低了平時項目中的小文件數(shù)量。相比于的，使用在原生標簽里插入屬性和一些模板表達式來展示數(shù)據(jù)，顯得簡潔了許多。

之前用的技術(shù)棧都是yeoman上找的webpack+react的腳手架，第一次看vue項目的源碼。
感覺一個vue文件里包含html模板、對應(yīng)JS和樣式的組合方式，使得組件化更加明顯，也降低了平時項目中的小文件數(shù)量。
相比于react的JSX，使用在原生標簽里插入屬性和一些模板表達式來展示數(shù)據(jù)，顯得簡潔了許多。
總體感覺，更小巧，更簡潔。
還有跟react有顯著不同的是，vue中使用原生js很方便，對dom的操作也很方便，所以在很多react很棘手的問題上，vue明顯方便了很多。

此項目的移動設(shè)備匹配方案使用的是淘寶的flexible方案，根據(jù)設(shè)備動態(tài)在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相應(yīng)的概念，可以參考淘寶出的flexible手冊進行了解。
進行了上述配置以后，就可以在css里隨意寫px，然后會自動轉(zhuǎn)換成rem值并進行多設(shè)備的匹配工作了。

項目還依賴了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.
總體來說就是讓應(yīng)用在移動端的體驗更加優(yōu)化，讓點擊從300ms左右的click動作變?yōu)?0~100ms的touchend動作，還解決了點透問題。鏈接：http://www.cnblogs.com/yexiao...

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

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

載入阿里CDS下的各個字體，就可以使用類似的方式來調(diào)用一個個小圖標了。

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

整個通篇看下來是個各組件各自為戰(zhàn)的小型webapp，很多功能都缺打磨，組件之間很少看到數(shù)據(jù)傳遞，都是自己調(diào)用ajax來獲取自己所需要的數(shù)據(jù)并展示出來，通過vue-router構(gòu)建單頁應(yīng)用，也沒有統(tǒng)一的狀態(tài)管理和單向數(shù)據(jù)流（類似redux），不過小而美本來就是vue的訴求吧。