兩種方式：

• 做前后端分離的項(xiàng)目，后端 spring-boot 只提供 RESTful 接口，前端用 vue
• spring-boot 做成你截圖中的那樣，創(chuàng)建一個(gè) spring-boot web 項(xiàng)目，但是需要結(jié)合一個(gè)模板引擎，可以選擇freemarker,如果用 freemarker 配置如下：

## Freemarker 配置
## 文件配置路徑
spring.freemarker.template-loader-path=classpath:/templates/
spring.freemarker.cache=false
spring.freemarker.charset=UTF-8
spring.freemarker.check-template-location=true
spring.freemarker.content-type=text/html
spring.freemarker.expose-request-attributes=true
spring.freemarker.expose-session-attributes=true
spring.freemarker.request-context-attribute=request
spring.freemarker.suffix=.ftl

可以參看我的這個(gè)小項(xiàng)目，有用到 spring-boot + vue + freemarker .

希望對(duì)你有幫助，有幫助的話別忘了關(guān)注我的公眾號(hào)啊。