vue+vue-router+axios+element-ui構建vue實戰項目之一（基礎知識篇）

前言

剛開始學習vue，通過一段時間基礎語法的學習，本人決定從零構建一個vue實戰項目系列，力求以簡明、清晰、準確的圖文以及代碼描述，配合 github 的項目開源代碼，給各位vue新手提供一個入門文案。

好了，廢話很少說，開始吧。

先後端分離開發模式

在若干年前，咱們的 WEB 項目開發模式是以下的：

1. 設計師設計頁面設計稿
2. 前端工程師切成 html+css+js 的頁面
3. 後端工程師拿到前端工程師的作好的頁面，利用模板引擎或其餘技術嵌套進後端代碼中，實現項目開發

這種開發模式的缺點是，哪怕頁面出現一點點小的改變，也須要前端人員和後端人員同時協調開發，而且後端人員不能把所有精力放在業務流程以及數據邏輯等方面，還必須和前端人員一塊兒來處理各類兼容問題。開發效率不高，溝通繁瑣。

後來，開發者們爲了各自可以在各自的領域發揮長處，先後端分離逐漸流行起來。

先後端分離大概能夠從四個方面來理解：

1. 交互形式 
2. 代碼組織方式 
3. 開發模式 
4. 數據接口規範流程

交互形式

瀏覽器----（請求接口）-----服務器

在先後端分離架構中，後端只須要負責按照約定的數據格式向前端提供可調用的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

一、在github上截止至5月份的星星數，能夠看出react領先vue緊跟其後，近兩年vue上漲速度很是明顯

二、在 Safari 6.1, OS X 的評測裏，vue 的性能直接排到了第一的位置

三、vue.js中mini版本的大小隻有72k(壓縮後爲23k)，react的大小爲132k，angular的大小爲144k

vue相對react、angular來講，更加輕量、學習成本更低，因此，在一樣優秀的狀況下，我選擇了vue —— 由於它學起來最簡單。

爲了實現先後端分離的開發理念，開發前端 SPA 項目，實現數據綁定，路由配置，項目編譯打包等一系列工做的技術框架

這裏，咱們說的 vue 不只僅是 vue.js 這一個文件，而是圍繞 vue.js 配套的一系列的工具，包含了一整套外圍工具的完整系統。

具體以下：

1. vue.js 核心
2. vue-router 實現路由工具
3. webpack 項目打包以及編譯工具
4. nodejs 前端開發環境
5. npm 前端包管理器
6. axios ajax 接口請求工具
7. sass-loader 和 node-sass  css 預處理
8. element-ui  基於 vue 的組件庫
9. vue-cli   vue 項目腳手架（一鍵安裝 vue 全家桶的工具）

好了，整個系列的第一篇文章，內容就是這些（還沒進入重點... :( ）

本來看着只想學一個vue，沒想到順帶把ES6，npm，node等等等等都學了一遍。前段時間網上也流傳出了一個職位叫作Webpack配置工程師，從這裏也能夠看出弄懂前端這個大雜燴確實不是那麼容易。你們一塊兒加油。

 

若是文章中存在錯誤的地方，麻煩請你們在評論中指正，以避免誤人子弟，謝謝！