Die Intersult Vue Components sind eine Reihe von Vue
-Komponenten für den Aufbau von reaktiven Web-Seiten.
Einbindung#
1. Die Einbindung erfolgt über Maven in das Spring Boot Projekt aus dem Intersult Nexus mit dem Artifakt:
<dependency> <groupId>com.intersult</groupId> <artifactId>vue-resource</artifactId> <version>1.0-SNAPSHOT</version> </dependency>
2. RequireJS im HTML laden:
<html> <head> <script type="text/javascript" src="vue-resource/thirdparty/require.js" data-main="main"></script> [...] </head> <html> <div id="vue-root"><template> [...] </template></div> </html>
3. Die Script-Ressourcen werden im main.js konfiguiert:
require.config({
// Thirdparty
vue: "vue-resource/thirdparty/vue.min",
promise: "vue-resource/thirdparty/promise.min",
// Integration
jquery: "vue-resource/integrate/jquery-noconflict",
"vue-jquery": "vue-resource/integrate/vue-jquery",
reactor: "vue-resource/integrate/reactor",
css: "vue-resource/integrate/require-css",
html: "vue-resource/integrate/require-html",
"var": "vue-resource/integrate/require-var",
attribute: "vue-resource/integrate/require-attribute",
packages: ["vue-resource"]
});
define(["vue", "vue-query"], function(Vue) {
return new Vue({
el: "#vue-root"
});
});
Aufbau#
Das Package "vue-resource" enthält ein eigenes main.js und registriert dort die Vue Komponenten:
Vue.register({
// Basic
"dialog-panel": "vue-resource/component/basic/dialog-panel",
[...]
// Transition
"expand-transition": "vue-resource/component/transition/expand-transition",
[...]
});
Die Komponenten können daher direkt verwendet werden:
<dialog-panel ref="dialog" title="Test">
<h1>Hello World!</h1>
</dialog-panel>
<button @click.prevent="$refs.dialog.open">Open</button>