SpringBoot + VueJS

Ceci est une ancienne révision du document !

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;
}

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}}

SpringBoot + VueJS

Element UI + VueJS integration

Test