springboot和vue是當前比較流行的前後端技術，也是部分大廠的主流架構。二者實現結合有三種方式：
- 前後不分離，通過引入的方式使用vue，也就是本文實現的方式
- 前後半分離，前後端項目寫在一個項目裏，分別搭建工程，可以參考：https://github.com/xichengxml/springboot-vue-template，前端項目也通過tomcat部署管理，後端工程師使用起來比較得心應手，且前端項目拆分時也比較方便。針對vue部署不是很熟悉或服務器資源有限的情況，建議採用這種方式
- 前後分離。前後端分別搭建項目，不多介紹
實現方式：
-
搭建springboot項目，注意引入web包和thymeleaf包
-
配置靜態文件目錄，將靜態文件映射到根目錄下，在application.properties中添加spring.mvc.static-path-pattern=/**即可
-
寫一個視圖映射配置類，單純的頁面跳轉建議採用這種方式，可以避免寫很多空的類和controller方法
package com.xicheng.acitivi.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; /** * description * * @author xichengxml * @date 2019-09-22 10:50 */ @Configuration public class SpringMvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("index"); } } -
下載vue.js，element.js，element.css，分別放到js、css目錄下（本項目引入時通過新建了一個公共引入文件）
-
新建一個index.html，放到templates目錄下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> <script src="/common/common-js.js" type="application/javascript"></script> </head> <body> <div id="app"> This is the index page of activiti! <el-button type="primary">測試element組件</el-button> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>- 啓動項目，訪問localhost:8080/即可
項目目錄結構：
![在這裏插入圖片描述]()
項目參考代碼：https://github.com/xichengxml/acitivi-demo
- 啓動項目，訪問localhost:8080/即可
