構建基於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大同小異。