说明

相比于《practice vaadin》书籍中样例程序中采用jdk16，打包成war，需要使用jetty调试，或者放到tomcat中运行。我对pom文件进行了修改，改为基于jdk 1.8和spring-boot 2.4.2。

准备工作

• 1. 需要安装v16版本的nodejs，以及jdk 1.8版本，并配置到环境变量中
• 2. 需要安装maven工具，我使用的是3.6.1版本

编译和运行程序

修改后程序上传到了github上，地址如下：
github.com/happytam/pr…

开发调试阶段，使用mvn clean spring-boot:run
生产阶段，使用mvn clean package -Pproduction进行打包

程序启动后的截图如下所示，代码中添加了两个路由地址，点击后就可以完成跳转。

代码和配置说明：

pom文件中的profile配置项production是vaadin中比较常见的写法，其中build-frontend配置项必须指定周期，比如compile，那么在编译阶段，就会调用webpack，生成js和页面文件，并最终打包到jar包中。

                            <execution>
                                <goals>
                                    <goal>build-frontend</goal>
                                </goals>
                                <phase>compile</phase>
                            </execution>

这个简单的样例，实现了竖直方向的布局，并指定了hello-world的路由关键字，并添加显示了一个段落。

package com.apress.practicalvaadin.ch02;

import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("hello-world")
public class HelloWorldView extends VerticalLayout {

  public HelloWorldView() {
    add(new Paragraph("Hello, World!"));
  }

}