Vue – SpringBoot + vue
Spring Boot + vue
Spring Boot : Tomcat Server + Backend
Spring Boot
To support frontend layout, we need to add dependencies.
build.gradle
dependencies { compile('org.springframework.boot:spring-boot-starter-web') compile('org.springframework.boot:spring-boot-starter-data-jpa') compile("org.springframework.boot:spring-boot-starter-thymeleaf") compile("net.sourceforge.nekohtml:nekohtml:1.9.22") testCompile group: 'junit', name: 'junit', version: '4.12' testCompile("org.springframework.boot:spring-boot-starter-test") }
thymeleaf is to support layout.
nekohtml is to use legacy mode in thymeleaf.(Want to use legacy template).
resources/application.yml
spring: resources: static-locations: classpath:/ui/,classpath:/META-INF/resources,classpath:/resources/,classpath:/static/,classpath:/public/ thymeleaf: check-template-location: true cache: true prefix: classpath:/ mode: LEGACYHTML5
UIController.java
@Controller public class UIController { @RequestMapping("/") public ModelAndView ui() { ModelAndView view = new ModelAndView(); view.setViewName("ui/index"); return view; } }
It’s ready to access resources/ui/index.html as template.
Vue
I use vue-cli and vue-router for this. Create basic app and build using webpack.
Next is vue side.
package.json
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "rm -rf ../../resources/ui && node build/build.js && cp -r dist ../../resources/ui" // Changed },
I changed build part to move build dist to spring boot.