介绍Vuecket：Vue.JS与Apache Wicket的魔法结合


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