構建基於Vue.js的前後端於一體的開發環境(一)
1.應用場景
近年來前端框架的發展如火如荼，新的框架和概念如雨後春筍搬迅速的“破土而出”。其中最火的就是MVVM模式的框架，其中代表實現就有Angular.js、Rect.js以及我們將要使用的Vue.js。
為什麼要用Vue那？
- 漸進式的學習曲線，學一部分就可以用一部分；
- 體積小巧、試用簡單；
- 可以更好的在移動端執行；
- 遮蔽顯式的對DOM的操作（如：JQuery）;
- 元件化開發，可以最大程度的降低冗餘程式碼；
一般情況下，都是完全的前後端分離，專案由專門的前端開發工程師來進行開發。前端只管介面和互動，後端只管向前端輸出資料。但是在有些中小型的公司或者部門，前端開發工程師的資源非常有限，一些內部系統或者規模不是很大的業務系統，如：OA辦公、中後臺管理系統等，往往是由服務端的開發工程師來實現前端的功能的。
服務端開發工程師往往對前端開發的技能只是初步掌握，做出來的介面往往非常難看、互動繁瑣。為了解決這些問題，就需要一個元件化、可以通過簡單的引用、組合來完成前端的功能實現，不需要精通js、css、html等前端的繁瑣的技術細節，就可以構建出來簡潔、美觀頁面的框架；經過對一些比較流行的前端框架的比較和試用，我選擇了Vue.js，而且我個人覺得將來像Vue.js這樣的MVVM框架必然會成為將來前端開發的霸主。
本文將帶您一步步，構建出基於Vue.js 的基本的集前後端與一體的開發環境。
2.環境涉及到的技術或框架
服務端：
Spring Boot 2
前端：
Vue.js
iview ui
axios
作業系統：
Mac OS
IDE：
IntelliJ IDEA
為了使專案簡單便於理解，服務端直接採用最小化配置的Spring Boot來進行構建。本文重點是講述如何將Vue.js整合到我們常規的服務端專案中，因此服務端的構建我們後邊會一帶而過，有需要詳細瞭解的可以檢視相關資料；
關於iview ui，因為Vue.js作為前端MVVM開發框架，本身不提供UI元件，但是在實際的開發中我們肯定是需要一套功能全面、風格清新的介面UI元件的。經過對目前市場主流（Element UI、iview UI、at-ui 等）的Vue.js UI元件庫的試用和對比,最終選了iview ui， 其主要有以下特點：
- 高質量、功能豐富
- 友好的API，自由靈活第試用空間
- 事無鉅細的文件
- 細緻、漂亮的UI
- 可自定義主題
- 活躍的開源社群
另市場上也有一些非常優秀的Vue.js移動端的UI元件庫，基於本文的使用場景，沒有將其納入到考察的範圍內。
前後端資料互動我們採用axios，iview ui 推薦的也是這個，當然你也可以用Vue官方的vue-resource。
作業系統和IDE對本文的影響不大，不同的作業系統、IDE大同小異。