Vuecket是一个Web框架，在客户端集成了VueJS，在服务器端集成了Apache Wicket。它兼具了两者的优点，使开发全栈应用程序变得更快，更轻松。
案例步骤：
通过`mvn archetype：generate`生成我们的项目：
mvn archetype:generate -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=8.9.0 -DgroupId=com.mycompany -DartifactId=mychat -DarchetypeRepository=https://repository.apache.org/ -DinteractiveMode=false
|
Vuecket尚未拥有自己的Maven项目模板。也许将来我们也会添加它。现在，让我们连接Vuecket本身。将以下依赖项添加到项目`pom.xml`中：
<dependency>
<groupId>org.orienteer.vuecket</groupId>
<artifactId>vuecket</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
|
默认情况下，Wicket项目已经包含一个Wicket欢迎页面。让我们添加一些代码以确保Vuecket已经在运行。例如，让我们在Markdown中显示Hello World，我们将使用vue-markdown库渲染Markdown 。
在HomePage.html中，添加：
<div wicket:id="app">
<vue-markdown wicket:id="markdown">This will be replaced</vue-markdown>
</div>
|
在HomePage.java中，以下代码：
public HomePage(final PageParameters parameters) {
super(parameters);
add(new VueComponent<String>("app")
.add(new VueMarkdown("markdown", "# Hello World from Vuecket")));
}
|
但是VueMarkdown类在哪里？我们将其定义如下：
@VueNpm(packageName = "vue-markdown", path = "dist/vue-markdown.js", enablement = "Vue.use(VueMarkdown)")
public class VueMarkdown extends Label {
public VueMarkdown(String id) {
super(id);
}
public VueMarkdown(String id, Serializable label) {
super(id, label);
}
}
|
注意@VueNpm批注。需要在此Wicket组件上启用Vuecket，这将从NPM加载所需的所有内容，以帮助浏览器正确呈现Markdown的已经存在的Vue组件。
如果一切正确，那么通过`mvn jetty：run`启动项目后，您应该在http：// localhost：8080上看到内容：Hello World from Vuecket
原理：
- 我们向页面添加2个Vue组件来标记页面：用于应用程序和Markdown输出
- 我们在服务器端将Vue组件与Wicket组件捆绑在一起（在HomePage.java中）
- 我们告诉Vuecket它需要哪个Vue.JS库来呈现“ vue-markdown”
- 然后，一切都变得很简单：Wicket，当将页面呈现给浏览器时，使用了“＃Vuecket中的Hello World”行，这是我们在添加Wicket组件时设置的，Vuecket帮助浏览器加载了必要的VueJS库，启动了VueJS应用程序并将问候语呈现为渲染的Markdown
