對vue餓了麼項目重構以後的一些理解

vue餓了麼重構的整理與思考
複製代碼

這是我第一次寫文章,主要是培養本身獨立思考的能力,順便留下技術的沉澱,看過不少文章都是寫博客以後就一直會有動力,也但願本身不斷學習,不斷的寫下去.

從去年開始就關注vue本身也作過一個項目,但只是那種照抄搬得寫了,對於不少東西不是很理解,今年來杭州找工做,經歷了一番波折,因而決定從新拾起vue,也是本着試試看的態度在慕課網上買了vue仿餓了麼,可是發現買了以後學到好多東西,首先對於項目總體架構有了理解,(之前是jq作項目主要是操做DOM,可是vue是數據驅動視圖,一切視圖的改變主要是數據的改變,只要這點轉變過來了就能夠了),記得之前大佬告訴過我說,會多少並不重要,重要的是對於項目的總體架構,之前不是很理解,這個項目以後開始發現項目已經慢慢開始可以架構起來了,vue主要思想必定要理解 數據驅動視圖

首先附上項目地址:my-sell

對於mvvm的實現原理 經過Directives指令作一層封裝而後去改變(視圖)DOM上,而視圖的改變,這裏我理解的是觸發事件以後,vue.js監聽，再反映到數據上
複製代碼

jq的實現原理 傳統的jq只是改變DOM,當交互比較複雜的時候很是麻煩,並且頻繁的操做DOM也是性能優化的障礙
複製代碼

思想轉變過來以後就開始架構項目

這是目錄結構,如圖所示

build config是項目的webpack相關配置,這個有篇文章寫得特別好 一字一句的搞懂vue-cli之vue webpack template配置

1.首先是對於頁面骨架的開發,就是我剛纔說的,要先能架構起項目,以後再給裏面填充具體的細節,這裏咱們採用vue-cli搭建,以後就是頁面路由的實現,在頭部和不一樣的路由開始填充一些東西,達到路由能夠切換,整個項目骨架清晰,下來就是往骨架裏面填充東西的事情
複製代碼

剩下的事情就是整個項目的各個組件的開發

1 ● 字體圖標的製做 實際項目開發時當將svg轉化爲iconfont製做工具IconMoon

2 ● 對於模塊化的理解 模塊化就是將屢次複用的代碼提取出來,達到複用精簡代碼的效果,包括js模塊化和css模塊化,之前的理解只是js模塊化,這個項目讓我對css模塊化有了必定的認識

3 ● vue-router路由機制 vue路由依賴：vue-router 經過組合組件來組成單頁應用程序，只須要將組件映射到路由便可。 前端路由的核心，就在於 —— 改變視圖的同時不會向後端發出請求。 須要注意2種模式的區別：hash模式和history模式，hash模式會在後面加一個很醜的#，能夠開啓history去掉。 hash模式原理：它的特色在於：hash 雖然出如今 URL 中，但不會被包括在 HTTP 請求中，對後端徹底沒有影響，所以改變 hash 不會從新加載頁面。hash能夠理解爲錨點，例如./index.html/#/foo，hash值爲#/foo，這樣不會跳轉頁面。就至關於統一頁面的不一樣錨點，頁面間跳轉與 ./index.html/#foo到./index.html/#bar相似 路由層面還會包括嵌套路由，動態路由以及重定向，至關於本身模仿瀏覽器請求而後服務器響應模式，其實不涉及向後端請求，僅在瀏覽器就能夠實現頁面跳轉

4 ● 對狀態管理vuex的理解

爲何要用vuex個人理解是：
(1)多個組件(視圖)共享狀態:通俗來說，就是多個組件間會通訊時，致使從後端拿來的數據發生變化，當組件較多時，若是兄弟組件間的通訊都依賴父組件進行通訊，會致使組件間的耦合很是高，從而致使項目邏輯混亂，難以維護。
(2)多個組件（視圖）依賴於同一狀態。 來自不一樣視圖的行爲須要變動同一狀態。
(3)它仍是一個共享數據中心,多個組件(視圖)依賴同一數據時,直接從vuex的action裏面拿就能夠了,不用重塑請求
(5)真正實現數據驅動視圖,vuex state，前端data view，前端DOM actions，用戶操做，引發data變化從而致使DOM變化.
一個狀態管理庫,會涉及到這三個部分:state view action.能夠知道的是
(1)state會影響view
(2)view會影響action

vuex的特色是把數據單獨隔離,造成一顆狀態樹,單獨隔離就意味着它有本身的生態系統.輸入和輸出,其中action做爲數據的輸入,state做爲數據的輸出,以下圖：
複製代碼

必定要注意mutation和action的區別！
複製代碼

mutation只變動本地的狀態，也就是說，直接只去修改store中的數據。 action包含異步操做，直接調用api，經過api的數據，再提交mutation。