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