前言
某課上有Vue前端餓了么實(shí)戰(zhàn)項(xiàng)目撇簿，這個(gè)練習(xí)對(duì)于初學(xué)者來(lái)說(shuō)再好不過(guò)了，美中不足的是孝宗，盡管該項(xiàng)目錄制時(shí)間很新穷躁，16年11月份錄制，然而當(dāng)時(shí)Vue版本仍然停留在1.0因妇，目前最新的版本已經(jīng)更新到2.1.8一些API也有所修改问潭，項(xiàng)目中也有些錯(cuò)誤老師沒(méi)來(lái)得及修正。我花了前后大概一周的時(shí)間婚被，學(xué)習(xí)完了全部?jī)?nèi)容狡忙，并且將項(xiàng)目改造成了2.x版本，填補(bǔ)了許多因?yàn)榘姹旧?jí)留下的坑址芯，這里做一個(gè)簡(jiǎn)單的總結(jié)灾茁，先來(lái)看看最終效果
最后兩頁(yè)就是完全自己寫(xiě)的了，因?yàn)楣日ǎ俸?滑稽
你能夠?qū)W到的
Vue Webpack的相關(guān)配置
老師較為細(xì)致的講解了Vue-Cli的webpack配置北专，你不需要會(huì)去，但是應(yīng)該知道哪些模塊用來(lái)干嘛的旬陡。
Mock
使用調(diào)試環(huán)境搭建的服務(wù)器模擬后臺(tái)JSON數(shù)據(jù)請(qǐng)求拓颓，涉及node的express操作，不理解原理沒(méi)關(guān)系描孟，只要會(huì)配置模擬數(shù)據(jù)就好驶睦，當(dāng)然，一個(gè)好前端画拾，node還是需要學(xué)習(xí)的
Vue-Resource
雖然官方已經(jīng)宣布不再維護(hù)了啥繁，但是2.x版本依然得到很好的支持，this.$http操作更符合Vue原生青抛。你能夠通過(guò)這個(gè)工具進(jìn)行ajax操作
Vue-Router
官方的前端路由旗闽，雖然項(xiàng)目中只是簡(jiǎn)單視圖切換，但你也應(yīng)該基本了解前端路由基本原理蜜另，搭建出一般SPA應(yīng)用
Vue基本API操作
基本項(xiàng)目學(xué)完以后适室，你就能對(duì)data，props举瑰，components捣辆，methods，created此迅，nextTick汽畴，computed等等有深入的認(rèn)識(shí)旧巾。可能在你以前閱讀API中沒(méi)能理解的模塊有了清晰認(rèn)知忍些，也能信手拈來(lái)的進(jìn)行應(yīng)用鲁猩。
CSS中的奇淫技巧
項(xiàng)目中老師用到了許多對(duì)于CSS樣式細(xì)微操作，可能很多同學(xué)對(duì)于CSS不是很在乎罢坝，但是為了達(dá)到和設(shè)計(jì)圖一樣的效果廓握，你想到的可能和表現(xiàn)出來(lái)的就不太一樣。
debug
軟件開(kāi)發(fā)中很重要的一環(huán)嘁酿，可能許多人在敲代碼的時(shí)候自信心爆棚隙券，但是進(jìn)行調(diào)試的時(shí)候就會(huì)被各種bug崩潰。老師在敲代碼的過(guò)程中也會(huì)出現(xiàn)許多的錯(cuò)誤闹司，而這些也正好我們新手所經(jīng)常的遇到的娱仔，你見(jiàn)可以看見(jiàn)老師用什么思維去解決問(wèn)題，調(diào)試臺(tái)報(bào)錯(cuò)的問(wèn)題很容易解決游桩，難的是不報(bào)錯(cuò)的問(wèn)題拟枚，更需要你從邏輯層面去思考≈诠基本學(xué)習(xí)完成以后，你也能處理開(kāi)發(fā)過(guò)程中遇到的絕大多數(shù)問(wèn)題
你不能學(xué)到的
Vue的各類插件
老師基本只用了Vue的原生API就完成了整個(gè)項(xiàng)目隔箍，唯一應(yīng)用的是better-scroll庫(kù)谓娃，這個(gè)庫(kù)有很多坑爹的地方，你需要靠自己進(jìn)行調(diào)試
Vuex
Vuex 之于 Vue 就像 Redux 之于 React蜒滩，處理復(fù)雜的組件數(shù)據(jù)交互滨达。但是項(xiàng)目中只用刀了父子組件溝通，所以沒(méi)有使用vuex
Vue-Router的高級(jí)操作
這個(gè)前端路由還有很多的能力俯艰，比如懶加載捡遍，命名路由，history模式等竹握。如果你的項(xiàng)目中需要画株，你可能還是得參考API
表單控件操作
Vue對(duì)于表單控件使用了雙向綁定，然而項(xiàng)目中沒(méi)有需要輸入的功能啦辐，因此沒(méi)有包含此部分的練習(xí)
你可能遇到的坑
transition單獨(dú)提出來(lái)
transition不再是綁定在某個(gè)div組件內(nèi)谓传，而是以
<transition name="fade"><div></div></transition>
進(jìn)行包裹組件，使用CSS過(guò)渡在2.0中只是一個(gè)過(guò)渡狀態(tài)芹关，你需要指定樣式的最終表現(xiàn)
單組件只能有一個(gè)root
<templete>
<div></div>
</templete>
必須用一個(gè)標(biāo)簽包裹組件而不是并列的兩個(gè)標(biāo)簽
v-el v-ref的移除
實(shí)戰(zhàn)中老師使用v-el去獲取DOM元素续挟，2.x統(tǒng)一為ref，如果綁定的是html標(biāo)簽則獲得的是DOM對(duì)象侥衬，是組件則獲得組件實(shí)例
$dispatch的移除
老師在寫(xiě)小球動(dòng)畫(huà)的時(shí)候诗祸，用了事件派發(fā)去通知兄弟組件跑芳，2.x中已經(jīng)徹底移除，想要獲得相同效果的話需要?jiǎng)?chuàng)建一個(gè)空組件充當(dāng)event bus直颅，偷了個(gè)懶就沒(méi)寫(xiě)博个。
better-scorll庫(kù)的坑
這個(gè)庫(kù)挺坑的，在食品詳情頁(yè)际乘，第一次進(jìn)入時(shí)候可以成功觸發(fā)點(diǎn)擊事件坡倔，但是之后就不行。因此脖含，我讓它每次進(jìn)入食品詳情頁(yè)都新建一個(gè)bs對(duì)象罪塔，或許你會(huì)找到更好的方法
最后
如果你對(duì)于Vue并不熟悉，再或者你對(duì)JS的面向?qū)ο蟛皇煜ぱ珹rray征堪，String類型的原生操作不熟悉，ES6語(yǔ)法不熟悉关拒，那么這個(gè)實(shí)戰(zhàn)項(xiàng)目可能并不適合你佃蚜。你還是需要深入學(xué)習(xí)javascript，然后再學(xué)習(xí)Vue的官方文檔着绊⌒乘悖總而言之，這個(gè)實(shí)戰(zhàn)項(xiàng)目并不適合純新手归露。
當(dāng)然洲脂，如果你學(xué)習(xí)完整個(gè)項(xiàng)目以后，并且了解每一個(gè)模塊的運(yùn)行機(jī)制剧包。那么你就瞥見(jiàn)了現(xiàn)代前端工程的開(kāi)發(fā)模式恐锦，再去學(xué)習(xí)angular react 小程序便會(huì)得心應(yīng)手了。
就是這樣 :)
