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

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

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

項(xiàng)目還依賴了fastclick庫(kù)，其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)用在移動(dòng)端的體驗(yàn)更加優(yōu)化，讓點(diǎn)擊從300ms左右的click動(dòng)作變?yōu)?0~100ms的touchend動(dòng)作，還解決了點(diǎn)透問題。鏈接：http://www.cnblogs.com/yexiao...

項(xiàng)目中的各種小圖標(biāo)是使用阿里巴巴的fonticon解決方案（http://www.iconfont.cn/）來實(shí)現(xiàn)的，只要在scss里定義一個(gè)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下的各個(gè)字體，就可以使用類似的方式來調(diào)用一個(gè)個(gè)小圖標(biāo)了。

項(xiàng)目首頁展示的swiper里的圖像都通過一個(gè)簡(jiǎn)單的正則表達(dá)式，被重定向到了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)一大?。?/p>

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