SpringBoot + VueJS

Element UI + VueJS integration

Dans la vue index.html :

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">	
	<link rel="stylesheet" href="/css/style.css">
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

body{
	font-family: 'Lato', sans-serif;
}

a.el-button{
	text-decoration: none;
}

Maven integration

Créer le dossier local-maven-repo à la base du projet Eclipse. Télécharger la librairie springboot-vuejs.jar, et copier là dans ce dossier

<dependency>
    <groupId>com.sample</groupId>
    <artifactId>sample</artifactId>
    <version>1.0</version>
    <scope>system</scope>
    <systemPath>${project.basedir}/local-maven-repo/springboot-vuejs.jar</systemPath>
</dependency>

Test

Créer un contrôleur Spring :

@Controller
@RequestMapping("/ui/")
public class UiTest {
	
	@GetMapping("test")
	public String test(ModelMap model) {
		VueJS vue=new VueJS("#app");
		vue.addData("input", "Hello world !");
		model.put("vueJS", vue.getScript());
		return "ui/test";
	}
	
}

Et la vue associée :

{{>/header}}
<%input%>
<el-input placeholder="Please input" v-model="input"></el-input>
{{{vueJS}}}
{{>/footer}}