之后的這八周學(xué)習(xí)就是一段不斷翻車饺蔑、不斷總結(jié)锌介、然后再不斷爬起來的過程。工地的居住環(huán)境十分惡劣，4平米的一個倉庫孔祸，狹小昏暗無窗隆敢，通風(fēng)不暢、白天室內(nèi)溫度足足有42°崔慧，能夠?qū)垢邷氐闹挥幸粋€小風(fēng)扇拂蝎，還時不時停水?dāng)嚯姡詫?dǎo)致工作休息時間也不太穩(wěn)定惶室，白天太熱了就出去上工干活温自，傍晚涼快了就回來寫代碼，有時晚上熱的失眠就爬起來寫通宵皇钞。期間的迷惑悼泌、糾結(jié)與苦楚實在是難以言表。
這期間寫了六個小demo
源文件下載地址：https://github.com/gusuziyi/mall
第一周比較順利夹界，在網(wǎng)易云課堂上看完了bootstrap券躁，然后就找了三個網(wǎng)站開始山寨，中間盡管小有波折掉盅，但在bootstrap官網(wǎng)上基本都找到了解決方案，還順便學(xué)會了怎樣使用阿里的iconfont圖標(biāo)以舒，這是一套字體矢量圖標(biāo)趾痘，在任何設(shè)備上都不會失真，與bootstrap的響應(yīng)式思想十分契合蔓钟；
第二周在淘寶上買了一套vue視頻永票，跟著敲了一遍，一周時間基本入門滥沫，然后結(jié)合bootstrap寫了mall的v1.0版侣集，實現(xiàn)了一個類似于購物車的小頁面，這期間發(fā)現(xiàn)了mockjs兰绣，他可以攔截瀏覽器的ajax請求世分，然后返回隨機(jī)生成的隨機(jī)數(shù)，是一款很不錯的測試工具缀辩。代碼方面整體來講并沒遇上過多的障礙臭埋，因為就用一個vue對象，所有函數(shù)和變量在一起臀玄，修復(fù)bug很容易瓢阴。
使用mock生成數(shù)據(jù)，這里我試了很久健无，除數(shù)字外其他數(shù)據(jù)都必須返回函數(shù)調(diào)用荣恐，否則會有無法實現(xiàn)Random方法，另外dataImage方法需要canvas支持，此處不影響叠穆，但在后來寫V3.0版時node服務(wù)器會有報錯
第三周開始學(xué)nodejs少漆，淘寶上買了一套視頻，跟著視頻手?jǐn)]了一套http服務(wù)器和路由器痹束，然后在8888端口上實現(xiàn)了之前那個簡陋的拼圖游戲
但這期間node讓我費解的地方有兩個祷嘶，一個是callback是什么屎媳，如圖一第12行，一個是為何在函數(shù)體內(nèi)的this賦值论巍，圖二第5行烛谊，
第四周開始學(xué)Mongo數(shù)據(jù)庫，看過兩天文檔之后抛猫，然后在路由里面寫出了增刪改查方法在查過大量資料之后，終于理解了callback是處理異步低速函數(shù)的一種機(jī)制嘉汰，由于讀寫硬盤與CPU運行相比極慢丹禀，所以程序運行后丟給readFile一個cb就不管了，什么時候硬盤讀完了用cb把數(shù)據(jù)發(fā)送過來觸發(fā)響應(yīng)函數(shù)就行了鞋怀，而this賦值則是js中的閉包概念双泪，這樣做的好處是能夠避免變量遭到污染，那時我還不知道es6的存在密似，還不知道變量作用域提升焙矛，隨處用的都是var，所以費了好大力氣才理解這個閉包的概念残腌，其中走的彎路一言難盡村斟。
由于當(dāng)時不知道子路由和路由重定向尸红，結(jié)果純手工實現(xiàn)的這些功能
對策略集里的通用函數(shù)復(fù)雜度估計不夠，第4行開始只寫了一個data，結(jié)果寫到一大半的時候發(fā)現(xiàn)bug無法解決只能改結(jié)構(gòu)外里，增加data1和data2怎爵，挺無奈的。盅蝗。鳖链。
第六周，因為學(xué)會express墩莫，就開始改版之前mall芙委，升級成V2.0，主要改動有兩個狂秦，一是將mall頁面搭設(shè)到本地express服務(wù)器上灌侣，二是將頁面拆成層層嵌套的vue組件
這期間重點關(guān)注了關(guān)于組件間的數(shù)據(jù)通信：父子之間使用props裂问，子父之間使用emit廣播侧啼，兄弟之間使用數(shù)據(jù)總線，更復(fù)雜的數(shù)據(jù)交換還可以使用vuex堪簿。同時痊乾，為了各組件間可以共享數(shù)據(jù)和方法，將根節(jié)點綁定的vm定義為全局原型變量Vue.prototype椭更。經(jīng)過這個練習(xí)哪审，也基本理解了MVC設(shè)計模式。
第七周學(xué)習(xí)了less與es6的基本語法甜孤，然后特郁悶的發(fā)現(xiàn)項目中import和export始終無法正常使用，我一直懷疑是sublime上的babel沒有調(diào)試好畏腕，但是始終查找不出問題缴川，sublime里面的babel插件實在是浩如煙海，查找資料也感覺無從入手描馅，學(xué)習(xí)一度陷入停滯把夸，后來無意中發(fā)現(xiàn)vue-cli，接觸到工程腳手架這個概念铭污，發(fā)現(xiàn)這個工具真是神器恋日，所有的node模塊都可以用npm集成過來，而且babel是默認(rèn)內(nèi)置的嘹狞，組件也全部都是單獨的文件岂膳，加上嚴(yán)格的eslint書寫規(guī)范，非常適合多人合作項目磅网。
所以在第八周使用vue-cli把mall升級成了V3.0谈截，首先介紹下文件夾目錄樹結(jié)構(gòu)，設(shè)計的非常有條理性：build是后端服務(wù)器文件；config是服務(wù)器配置簸喂；dist是工程成品文件毙死，使用npm run build 生成，全部兼容es5格式喻鳄；node_modules是依賴包扼倘，由package.json索引，工程文件不必上傳除呵，根目錄下使用npm install能夠自動安裝再菊；src為工作目錄，其中的assets為靜態(tài)資源竿奏，componets為組件集合袄简，router保存路由表，App.vue是app的入口組件泛啸，main.js負(fù)責(zé)綁定App組件绿语、入口文件和路由表；static是內(nèi)置的靜態(tài)路由
第一步我在后端另外搭建了jsonServer服務(wù)器候址，用于返回測試的mock數(shù)據(jù)吕粹，由于vue-cli默認(rèn)占用8080端口，而我將jsonServer設(shè)置于3003端口岗仑，這導(dǎo)致前端的ajax訪問涉及到跨域問題匹耕，我的方法是使用express的cors中間件，把整個3003端口全部設(shè)置成可以跨域訪問荠雕，這就是使用node服務(wù)器的好處稳其，否則在前端我們只有通過構(gòu)造jsonp請求才能解決。
jsonServer的一些設(shè)置炸卑，注意第12行既鞠，jsonserver可以將ajax返回數(shù)據(jù)中的對象鍵值解析成express子路由，這樣一份mock就可以支持多個頁面數(shù)據(jù)查詢盖文，非常方便
后來我偶然發(fā)現(xiàn)在config/index.Js中可以直接設(shè)置代理轉(zhuǎn)發(fā)proxyTable嘱蛋，這樣就可以不用設(shè)置cors中間件了
由于想使用bootstrap，所以查了很久如何在main中引入jquery五续，相關(guān)資料真的寥寥無幾洒敏，直覺告訴我可能思路不對，資料這么少疙驾，證明bootstrap也許并不適合vue凶伙，然后我就查vue該用什么ui框架，結(jié)果主流的有兩個element和iview它碎，要面臨二選一镊靴，其實自學(xué)前端真的好糾結(jié)铣卡，經(jīng)常要糾結(jié)于學(xué)哪個技術(shù)，框架要在vue偏竟、angular和react中三選一煮落，預(yù)處理器要在less和sass中二選一，數(shù)據(jù)可視化要在highchart踊谋、echart和d3中三選一蝉仇，UI更是要N選一。最后element和iview糾結(jié)了許久殖蚕，覺得iview更好看一點轿衔，于是就學(xué)了iview。這也是后來遭遇神坑的開端睦疫。
然后就是編寫組件害驹，這期間學(xué)會了less，感覺樣式代碼變得很清晰了蛤育，可維護(hù)性大大提升了
但是由于vue還是初學(xué)階段宛官，還是踩到了許多坑，在不斷糾結(jié)瓦糕，不斷試錯底洗，不斷查找資料當(dāng)中，總結(jié)出了以下七條難忘的教訓(xùn)：
一咕娄、 data必須定義成函數(shù)亥揖，同時返回對象
二、 computed與methods聯(lián)系不大圣勒，它更像是data费变，一種沒有輸入但必須有輸出的data
三、 想讓props支持駝峰圣贸，必須定義成對象挚歧，例如props:{ isAllCheck:{} , shop:{} },數(shù)組不可以
四、 script中的大寫到了template中會自動轉(zhuǎn)成橫線旁趟，template不支持大寫昼激，例如： ShopList會變成<shop-list>
五庇绽、 Watch中定義方法為 變量名:函數(shù)體,例如: isAllCheck(){ this.isCheck=this.isAllCheck }
六锡搜、可以在created 或mounted中監(jiān)聽廣播,他們不是在創(chuàng)建時監(jiān)聽，而是會一直監(jiān)聽
七瞧掺、可以在枚舉時把:key="index"交給子組件,但子組件中不可調(diào)用index耕餐，會無法識別，正確的做法是子組件發(fā)出廣播事件辟狈，在父組件中監(jiān)聽事件然后使用index
雖然和之前的V1.0肠缔、V2.0看起來幾乎一樣夏跷，但是后臺發(fā)生了翻天覆地的變化，由于還沒解決node支持canvas的問題明未，無法繪制base64格式的隨機(jī)顏色圖片槽华，v3.0相反還要更丑一點。
就這樣基本完成這個階段的自學(xué)計劃趟妥，走了不少彎路猫态，但同時也學(xué)了不少知識，與七月底的迷茫不同披摄，現(xiàn)在對今后有十分清晰的學(xué)習(xí)目標(biāo)亲雪，就是vue-cli、iview和webpack疚膊，2018年8月,自學(xué)的第十二個月結(jié)束义辕，感覺自己依舊是個戰(zhàn)五渣，希望自己還能堅持的住寓盗，加油
