Spring Boot + Vue先後端分離（一）前端Vue環境搭建

 

 

先後端分離已經成爲互聯網項目開發的主流使用方式。

經過 nginx + Tomcat 的方式,中間加一個 nodejs有效的進行解耦，而且先後端分離會爲之後的大型分佈式架構，彈性計算架構，微服務架構，多端化服務（多種客戶端，例如：瀏覽器，車載終端，安卓，IOS等）打下堅實的基礎。

 

這個步驟也是一種進化之路。

 

個人開源項目  一點知識學院  技術是spring boot +easyui ，可是不是先後端分離的，ui界面仍是有點舊了，有些朋友說是否能夠更換一套ui，還有朋友在學習的時候說能不能作成先後端分離。

 

這個固然會知足支持個人朋友，爲了能更好的作好先後端分離，我也作了不少準備，從項目的需求，到原型圖，再到選擇框架技術，最終決定從如今搞起先後端分離的技術，而且不定時的更新有關的技能，最後會開源一個項目，和一點知識學院同樣 會是一個完整的項目，拿來即用的那種，但願對你們有幫助，也多謝你們的支持。

 

說到先後端分類，咱們須要瞭解它的有點，就是咱們爲何使用先後端分離？

有一下幾點，可能會更多，可是目前我看到的幾點以下：

 

1. 能夠實現真正的先後端解耦，前端服務器使用 nginx。

2. 發現bug，能夠快速定位是誰的問題，不會出現互相踢皮球的現象。

3. 在大併發狀況下，能夠同時水平擴展先後端服務器

4. 減小後端服務器的併發/負載壓力。

5. 即便後端服務器暫時超時或者宕機了，前端頁面也會正常訪問，只不過數據顯示不出來而已。

6. 接口能夠公用

7. 頁面顯示的東西再多也不怕，由於是異步加載。

8. nginx 支持熱部署，不用重啓服務器，前端無縫升級。

9. 增長代碼的維護性&易讀性（先後端耦合在一塊兒的代碼讀起來至關費勁）

10. 提高開發效率，由於能夠先後端並行開發，而不是像之前的強依賴

11. 在nginx 中部署證書，外網使用http訪問，而且只開發443和80端口，其餘端口一概關閉（防止***戶端口掃描），內網使用http，性能和安全都有保障

12. 前端大量的組件代碼得以複用！

 

目錄：
1，安裝node.js

2，安裝cnpm

3，cnpm安裝腳手架vue-cli

4，構建項目

5，安裝項目依賴

6，運行項目

 

下面咱們開啓咱們的vue學習之旅吧！！！

1，安裝node.js

 

首先 進入Node.js官網：https://nodejs.org/en/，選擇須要的版本下載並安裝Node.js。

 

 

下載後文件格式以下：

 

#安裝Node

 

 

 

#驗證Node.js是否安裝好

 

打開cmd命令行窗口。輸入node -v便可獲得對應的Node.js版本。

 

 

npm包管理器是集成在Node.js中的，因此在安裝Node.js的時候就已經自帶了npm，輸入npm -v可獲得npm的版本。

 

 

若是須要將 npm版本更新到最新版本，能夠輸入如下命令npm -g install npm，更新npm至最新版本。

 

2，安裝cnpm

 

安裝 cnpm 執行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org , 國內鏡像（npm 國內鏡像 https://npm.taobao.org/）cnpm 命令代替默認的npm命令，賴包加載速度快而且沒有任何限制。

 

 

3，cnpm安裝腳手架vue-cli

 

爲何使用腳手架？
vue-cli這個構建工具大大下降了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，至關於啓動了一個請求服務器，給你搭建了一個測試環境，只關注開發就OK。

 

在命令行中運行命令 cnpm install -g vue-cli 安裝腳手架。

 

4，構建項目

 

好了，上面的幾個須要的工具和環境已經配置好了，下一步咱們須要構建項目了。

構建項目分以下幾步：
1，進入項目須要存儲的路徑目錄下，
2，輸入新建項目命令 vue init webpack test-vue，執行後會自動生成vue項目。

效果以下：
進入項目目錄。

 

建立項目

 

 

 

5，安裝項目依賴

 

安裝項目依賴用以項目的開發，很簡單同樣命令搞定。

輸入命令 cnpm install 安裝項目所需的依賴包資源。

 

 

 

6，運行項目

項目準備完畢後，輸入命令npm run dev 來運行項目

 

 

項目運行成功後瀏覽器訪問地址 http://localhost:8080 就能夠啦。

---

 

好的，vue的環境搭建到這裏就ok了，後面就能夠和springboot後端框架作先後端分離了，期待下篇。。。