前言
剛開始學習vue，經過一段時間基礎語法的學習，本人決定從零構建一個vue實戰項目系列，力求以簡明、清晰、准確的圖文以及代碼描述，配合 github 的項目開源代碼，給各位vue新手提供一個入門文案。
好了，廢話不多說，開始吧。
前后端分離開發模式
在若干年前，我們的 WEB 項目開發模式是如下的：
- 設計師設計頁面設計稿
- 前端工程師切成
html+css+js的頁面 - 后端工程師拿到前端工程師的做好的頁面，利用模板引擎或其他技術嵌套進后端代碼中，實現項目開發
這種開發模式的缺點是，哪怕頁面出現一點點小的改變，也需要前端人員和后端人員同時協調開發，並且后端人員不能把全部精力放在業務流程以及數據邏輯等方面，還必須和前端人員一起來處理各種兼容問題。開發效率不高，溝通繁瑣。
后來，開發者們為了各自能夠在各自的領域發揮長處，前后端分離逐漸流行起來。
前后端分離大概可以從四個方面來理解：
- 交互形式
- 代碼組織方式
- 開發模式
- 數據接口規范流程
交互形式
瀏覽器----（請求接口）-----服務器
在前后端分離架構中，后端只需要負責按照約定的數據格式向前端提供可調用的API服務即可。前后端之間通過HTTP請求進行交互，前端獲取到數據后，進行頁面的組裝和渲染，最終返回給瀏覽器。
代碼的組織方式
代碼的徹底分離：
前后端代碼庫分離，前端代碼中有可以進行Mock測試(通過構造虛擬測試對 象以簡化測試環境的方法)的偽后端，能支持前端的獨立開發和測試。而后端 代碼中除了功能實現外，還有着詳細的測試用例，以保證API的可用性，降低 集成風險。
開發模式
產品/領導/客戶提出需求
UI做出設計圖
前后端約定接口&數據&參數
前后端並行開發（無強依賴，可– 前后端並行開發，如果需求變更，只要接口&參數不變，就不用兩邊都修改代碼，開發效率高）
前后端集成
前端頁面調整
集成成功
交付
接口規范流程
在開發期間前后端共同商定好數據接口的交互形式和數據格式。然后實現前后端的並行開發，這個步驟是前后端分離最為重要的！
1.前端工程師再開發完成之后可以獨自進行mock測試。
2.后端也可以使用接口測試平台進行接口自測
然后前后端一起進行功能聯調並校驗格式，最終進行自動化測試。
前端 MV* 架構
隨着 HTML5 的流行，前端不再是人們眼中的小玩意，以前在 C/S 中實現的桌面軟件的功能逐步遷移到了前端，前端的代碼邏輯逐漸變得復雜起來。
以前只用於后台的 MV* 等架構在前端逐漸使用起來，以下列舉了部分常用的 MV* 框架。
隨着這些 MV* 框架的出現，網頁逐漸由 Web Site 演變成了 Web App，最終導致了復雜的單頁應用（ Single Page Application）的出現。
SPA
單頁web應用（single page web application，SPA），就是只有一張Web頁面的應用。單頁應用程序 (SPA) 是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。 [1] 瀏覽器一開始會加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，都由JavaScript來控制。因此，對單頁應用來說模塊化的開發和設計顯得相當重要。
所有的前端人員都應該明白我們的頁面的 url 構成：
http://www.baidu.com/login.html?wd=vue&ie=UTF-8#test/index
如上的 url 由以下部分組成：
http:// 規定了頁面采用的協議。
www.baidu.com/ 為頁面所屬的域名。
login.html為讀取的文件名稱。
?wd=vue&ie=UTF-8 給頁面通過 GET 方式傳送的參數
#test/index 為頁面的錨點區域
前面四個發生改變的時候，會觸發瀏覽器的跳轉亦或是刷新行為，而更改 url 中的錨點，並不會出現這種行為，因此，幾乎所有的 spa 應用都是利用錨點的這個特性來實現路由的轉換。以我們的 vue 項目為例，它的本地 url 結構一般為以下格式：
http://localhost:3000/#/user/login
可以明顯的看到我們所謂的路由地址是在 # 號后面的，也就是利用了錨點的特性。
為什么選擇vue
1、在github上截止至5月份的星星數，可以看出react領先vue緊跟其后，近兩年vue上漲速度非常明顯
2、在 Safari 6.1, OS X 的評測里，vue 的性能直接排到了第一的位置
3、vue.js中mini版本的大小只有72k(壓縮后為23k)，react的大小為132k，angular的大小為144k
vue相對react、angular來說，更加輕量、學習成本更低，所以，在同樣優秀的情況下，我選擇了vue —— 因為它學起來最簡單。
為了實現前后端分離的開發理念，開發前端 SPA 項目，實現數據綁定，路由配置，項目編譯打包等一系列工作的技術框架
這里，我們說的 vue 不僅僅是 vue.js 這一個文件，而是圍繞 vue.js 配套的一系列的工具，包含了一整套外圍工具的完整系統。
具體如下：
- vue.js 核心
- vue-router 實現路由工具
- webpack 項目打包以及編譯工具
- nodejs 前端開發環境
- npm 前端包管理器
- axios ajax 接口請求工具
- sass-loader 和 node-sass css 預處理
- element-ui 基於 vue 的組件庫
- vue-cli vue 項目腳手架（一鍵安裝 vue 全家桶的工具）
好了，整個系列的第一篇文章，內容就是這些（還沒進入重點... :( ）
原本看着只想學一個vue，沒想到順帶把ES6，npm，node等等等等都學了一遍。前段時間網上也流傳出了一個職位叫做Webpack配置工程師，從這里也可以看出弄懂前端這個大雜燴確實不是那么容易。大家一起加油。
如果文章中存在錯誤的地方，麻煩請大家在評論中指正，以免誤人子弟，謝謝！