1. 程式人生 > >SpringMVC+VUE開發環境搭建

SpringMVC+VUE開發環境搭建

簡單記錄一下springmvc+vue搭建

1,準備好springmvc專案

重點不在這不講太多,搭建好的結構如下:

2,新建front目錄用於存放前端專案

進入front目錄命令列

# 全域性安裝 vue-cli
$ cnpm install --global vue-cli
# 建立一個基於 webpack 模板的新專案
$ vue init webpack front

上面命令執行完之後安裝依賴

npm install
然後執行
npm run dev

至此前端專案已搭建好

3,配置vue打包生成到springmvc專案下以及配置介面呼叫

開啟front->config->index.js

proxyTable設定介面對映

如下

接著設定front啟動地址和埠

最後修改build設定輸出到springmvc的webapp下即可

命令列敲npm build 即會編譯前端並生成html+js到springmvc

如圖所示:

總結:當然靜態html+js程式碼完全可以放到Nginx伺服器上,做到完全的前後端分離,這裡由於條件限制放到同一臺伺服器上。