最近在學習慕課網的課程：用vue.js做一個仿餓了么外賣APP的項目，現在也把流程啊什么的暫時先整理一下在這個博客上面。
當然，這個過程會有點長，不過確實能學到很多東西。
話不多說，馬上開始吧。
注：當我們把用vue-cli腳手架搭建成的vue項目復制到其他地方時，要把node_modules目錄刪除，不然在其他地方無法執行cnpm run dev，這其中設計到路徑的問題。刪除之后要重新cnpm install。
https://segmentfault.com/q/1010000006912664
https://www.zhihu.com/question/41409670?sort=created
1、項目介紹
選用當前最火的MVVM框架作為這個項目的技術棧
MVVM架構：
View和model通過viewModel來通信，但數據發生變化，viewmodel能夠觀察到這種數據的變化，然后通知到對應的視圖做自動更新；當用戶操作view視圖，viewModel也能監聽到視圖的變化，然后通知數據做改動，實現了數據的雙向綁定。
應用場景：
針對具有復雜交互邏輯的前端應用；
它可以提供基礎的架構抽象；
可以通過AJAX數據持久化，保證前端用戶體驗
好處：
當前端和數據做一些操作的時候，可以通過AJAX請求對后端做數據持久化，不需要刷新整個頁面，只需要改動DOM里需要改動的那部分數據。特別是移動端應用場景，刷新頁面太昂貴，會重新加載很多資源，雖然有些會被緩存，但是頁面的DOM,JS,CSS都會被頁面重新解析一遍，因此移動端頁面通常會做出SPA單頁應用。
Vue.js的特點：MVVM框架、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
核心思想：數據驅動、組件化。
該項目只提取餓了么其中一個模塊--商家模塊進行開發
項目開發的一個完整流程：
項目的需求分析--腳手架工具--數據mock--架構設計--代碼編寫--自測--編譯打包等方面完全簡講述開發一個web的全流程，更好地了解一個項目從0到1的過程。
當然這個項目在開發中也會以線上生產環境的代碼質量來要求。
這個過程還包括：
代碼開發及測試環節：以像素級完美還原UI設計圖；以真實外賣APP數據做演示，以保證代碼無兼容性問題。
代碼規范：
項目中所用的代碼大到架構設計、組件抽象、模塊拆分、代碼風格統一、JS變量命名規范、CSS代碼規范。致於編寫高可維護、易於拓展、通用性強的代碼，了解真實互聯網公司是如何開發前端項目的。
所需技術：
流程及開發方法：
項目完整的開發流程；組件化、模塊化的開發模式；使用Vue-cli腳手架初始化Vue.js項目；webpack的打包原理；模擬json后端數據，前后端分離開發；es6+eslint的開發方式。
第三方組件：
使用stylus編寫模塊化的CSS；使用vue-router開發單頁應用；使用vue-resource與后端數據交互；在Vue.js框架里和第三方JS插件交互。
設計思想與模式：
使用Vue.js的過渡編寫酷炫的交互動畫；移動端設備像素比；制作並使用圖標字；解決移動端1px邊框問題；移動端經典的css sticky footer布局；flex彈性布局。
關於Vue的數據驅動思想
在數據驅動的思想里，數據驅動DOM變化，DOM是數據的一種自然映射。
如果沒有MVVM框架，數據和視圖是如何交互的？
比如通過AJAX從后端獲取數據，會讓視圖改變，通過手動觸發DOM的改變；再比如我們通過前端交互改變一些數據，為了讓視圖也發生變化，仍然需要通過手動觸發進行DOM改變。手動改變DOM不僅繁瑣，還容易出錯。用了vue之后就可以省去操作DOM變化的步驟了。
在vue.js中，可以通過directives指令去對DOM做一層封裝，當數據發生變化，會通知指令去修改對應的DOM。
Vue.js還會對操作做監聽，當我們修改視圖的時候，vue.js監聽到這些變化，從而改變數據。
這個工程就實現了數據的雙向綁定。
vue.js數據響應的原理：
vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
思路整理
已經了解到vue是通過數據劫持的方式來做數據綁定的，其中最核心的方法便是通過Object.defineProperty()來實現對屬性的劫持，達到監聽數據變動的目的，無疑這個方法是本文中最重要、最基礎的內容之一，如果不熟悉defineProperty，猛戳這里
整理了一下，要實現mvvm的雙向綁定，就必須要實現以下幾點：
1、實現一個數據監聽器Observer，能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者
2、實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
3、實現一個Watcher，作為連接Observer和Compile的橋梁，能夠訂閱並收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖
4、mvvm入口函數，整合以上三者
詳情可查看：https://segmentfault.com/a/1190000006599500
關於vue組件化的思想
目的：拓展HTML元素，封裝可重用代碼
如下圖：左側是一個頁面，被拆分成小的區塊，每個區塊對應一個組件，組件可以嵌套，最終組合成為一個完整頁面。
在vue.js中，每個組件都對應一個viewModel，最終生成一個viewModel的樹：
組件設計原則：
頁面上每一個獨立的可視/可交互區域都可以視為一個組件。比如一個頁面的header、footer等等；
每個組件對應一個工程目錄，組件所需要的各種資源在這個目錄下就近維護。就近維護原則就體現了前端工程化思想，每個開發者都知道自己所開發的單元，代碼存在對應的組件目錄中。在vue.js中可以通過.vue文件來實現；
頁面不過是組件的容器，組件可以嵌套自由組合形成完整地頁面。在本次項目開發中，會拆分成一個個組件。
可以參考：Vue.js：輕量高效的前端組件化方案
組件化講解
一個簡單的HTML頁面，以此為基礎：
<!DOCTYPE html>
<html>
<head>
<title>揭開Vue組件的神秘面紗</title>
</head>
<body>
//這中間就是實例掛載點的實例邊界
<div id="vueInstance"></div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
// 創建一個新的Vue實例，並設置掛載點
var V = new Vue({
el : '#vueInstance'
});
</script>
</body>
</html>
在Vue中，可以使用Vue.component()來創建和注冊你的組件，這個構造器有兩個參數：組件的名字；包含組件參數的對象。
這個對象有點像Vue()構造器里的對象，它也有類似於Vue()里的el屬性和data屬性，但是又有點不一樣。
- Vue()構造器的el和data可以是對象。
- Vue.component()構造器的el和data只能是函數。
接下來注冊一個組件。創建並傳入兩個參數：組件的名字:'mine'；包含組件參數的對象:這個對象包含一個屬性'template'。
Vue.component('mine',{ template : '<p>My name is Appian.</p>' })
現在你已經有了自己的一個組件了，你可以在你的應用的任何地方使用它。只要你調用它的唯一標識(就是組件名字)，並用普通html標簽的格式來書寫，比如<mine></mine>，組件上注冊的內容就會在你的自定義標簽的地方插入。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue組件</title> </head> <body> <div id="vueInstance"> <mine></mine> <mine></mine> <mine></mine> </div> <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script> <script> Vue.component('mine',{ //這里就是注冊的內容 template : '<p>My name is Vue.</p>' }); // 創建一個新的Vue實例，並設置掛載點 var V = new Vue({ el : '#vueInstance' }); </script> </body> </html>
利用template標簽處理復雜組件
如果總是在vue.component()構造器里寫html代碼，復雜頁面就不得了了。為了避免上面的這種情況，所以我們可以用template標簽（注意屬性和標簽是不一樣的）來達到我們的目的。我們可以在頁面的任何地方，定義template標簽，並在template標簽內，寫好我們的模板。因為template標簽在頁面加載的時候不會渲染出來，只有在我們需要它的時候，這個標簽內的內容才會被渲染出來。所以，你可以把template標簽放在任何地方，並給它一個id，以便在組件注冊的時候能夠找到模板。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue組件</title> </head> <body> <div id="vueInstance"> <mine></mine> </div> <template id="myVue"> <p>i am vue</p> <p>welcome!</p> </template> <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script> <script> Vue.component('mine',{ //這里就是注冊的內容 template : '#myVue' }); // 創建一個新的Vue實例，並設置掛載點 var V = new Vue({ el : '#vueInstance' }); </script> </body> </html>
通過props向組件中傳遞數據
Vue是處理父組件向子組件中傳遞數據是通過props。
Vue.component('mine',{ template : '<p>Appian is from {{ city }}.</p>', props : ['city'] });
props可以是數組，也可以是對象。
那父組件那里又是怎么指派字段給子組件的呢？
<mine city="welcome"></mine>
更多詳細內容可以閱讀：http://www.jianshu.com/p/a58a12f0abd1