快速构建VaadinFlow+Springboot的全栈web项目

温馨提示，本文讲解比较精炼，主要以快速上手开发为主。
官方提供了与本文类似的教程讲解，地址https://vaadin.com/docs/latest/getting-started

vaadinstart_spring_initial_4">1访问vaadin官方提供的start网站(类似于 spring initial网站)

https://start.vaadin.com/app

2点击start 快速开始一个项目

Drawer是企业级常见的admin系统项目布局；
Tabs是适用于PC和手机/pad等设备的PWA项目布局;
None是自定义布局；
这里demo演示我选择Drawer布局。

3点击add view然后选择flow应用

4选择官方提供的helloWord视图

5点击右上角的download project下载项目工程源代码

可以自定义maven工程的artifact ID和groupID，目前项目最低需要jdk17+（电脑必须预装） ,前端构建工具选npm就行(电脑可以不预装maven运行时检测到没有npm会自动给你安装)，数据库按需自选(默认的H2就行)

6用IDEA 打开项目工程源代码

温馨提示，电脑要提前安装好jdk17+

使用idea默认的maven配置就行

项目打包需要依次执行maven clean compile package
如果maven构建失败，可以把pom中的repositories-url地址改成阿里云的，如下

<span class="token prolog"><?xml version="1.0" encoding="UTF-8"?>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><span>projectspan> <span class="token attr-name">xmlnsspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>http://maven.apache.org/POM/4.0.0<span class="token punctuation">"span>span><span class="token attr-name"><span class="token namespace">xmlns:span>xsispan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>http://www.w3.org/2001/XMLSchema-instance<span class="token punctuation">"span>span><span class="token attr-name"><span class="token namespace">xsi:span>schemaLocationspan><span class="token attr-value"><span class="token punctuation attr-equals">=span><span class="token punctuation">"span>http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd<span class="token punctuation">"span>span><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>modelVersionspan><span class="token punctuation">>span>span>4.0.0<span class="token tag"><span class="token tag"><span class="token punctuation"></span>modelVersionspan><span class="token punctuation">>span>span><span class="token comment"><!-- Project from https://start.vaadin.com/project/3ad2a749-d1fb-423b-8c8b-e684877f64b8 -->span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.example.application<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>my-app2025<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>namespan><span class="token punctuation">>span>span>my-app2025<span class="token tag"><span class="token tag"><span class="token punctuation"></span>namespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>versionspan><span class="token punctuation">>span>span>1.0-SNAPSHOT<span class="token tag"><span class="token tag"><span class="token punctuation"></span>versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>packagingspan><span class="token punctuation">>span>span>jar<span class="token tag"><span class="token tag"><span class="token punctuation"></span>packagingspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>propertiesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>java.versionspan><span class="token punctuation">>span>span>17<span class="token tag"><span class="token tag"><span class="token punctuation"></span>java.versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>vaadin.versionspan><span class="token punctuation">>span>span>24.6.0<span class="token tag"><span class="token tag"><span class="token punctuation"></span>vaadin.versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>propertiesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>parentspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>spring-boot-starter-parent<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>versionspan><span class="token punctuation">>span>span>3.4.1<span class="token tag"><span class="token tag"><span class="token punctuation"></span>versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>parentspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>repositoriesspan><span class="token punctuation">>span>span>
<span class="token comment"><!--        <repository>-->span>
<span class="token comment"><!--            <id>Vaadin Directory</id>-->span>
<span class="token comment"><!--            <url>https://maven.vaadin.com/vaadin-addons</url>-->span>
<span class="token comment"><!--            <snapshots>-->span>
<span class="token comment"><!--                <enabled>false</enabled>-->span>
<span class="token comment"><!--            </snapshots>-->span>
<span class="token comment"><!--        </repository>-->span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>repositoryspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>idspan><span class="token punctuation">>span>span>central<span class="token tag"><span class="token tag"><span class="token punctuation"></span>idspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>urlspan><span class="token punctuation">>span>span>https://maven.aliyun.com/repository/central<span class="token tag"><span class="token tag"><span class="token punctuation"></span>urlspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>releasesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>enabledspan><span class="token punctuation">>span>span>true<span class="token tag"><span class="token tag"><span class="token punctuation"></span>enabledspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>releasesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>snapshotsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>enabledspan><span class="token punctuation">>span>span>true<span class="token tag"><span class="token tag"><span class="token punctuation"></span>enabledspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>snapshotsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>repositoryspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>repositoriesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyManagementspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependenciesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.vaadin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>vaadin-bom<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>versionspan><span class="token punctuation">>span>span>${vaadin.version}<span class="token tag"><span class="token tag"><span class="token punctuation"></span>versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>typespan><span class="token punctuation">>span>span>pom<span class="token tag"><span class="token tag"><span class="token punctuation"></span>typespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>scopespan><span class="token punctuation">>span>span>import<span class="token tag"><span class="token tag"><span class="token punctuation"></span>scopespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependenciesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyManagementspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependenciesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.vaadin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token comment"><!-- Replace artifactId with vaadin-core to use only free components -->span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>vaadin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.vaadin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>vaadin-spring-boot-starter<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>org.parttio<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>line-awesome<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>versionspan><span class="token punctuation">>span>span>2.1.0<span class="token tag"><span class="token tag"><span class="token punctuation"></span>versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.h2database<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>h2<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>scopespan><span class="token punctuation">>span>span>runtime<span class="token tag"><span class="token tag"><span class="token punctuation"></span>scopespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>spring-boot-starter-data-jpa<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>spring-boot-starter-validation<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>spring-boot-devtools<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>optionalspan><span class="token punctuation">>span>span>true<span class="token tag"><span class="token tag"><span class="token punctuation"></span>optionalspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>spring-boot-starter-test<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>scopespan><span class="token punctuation">>span>span>test<span class="token tag"><span class="token tag"><span class="token punctuation"></span>scopespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.vaadin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>vaadin-testbench-junit5<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>scopespan><span class="token punctuation">>span>span>test<span class="token tag"><span class="token tag"><span class="token punctuation"></span>scopespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependenciesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>buildspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>defaultGoalspan><span class="token punctuation">>span>span>spring-boot:run<span class="token tag"><span class="token tag"><span class="token punctuation"></span>defaultGoalspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>pluginsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>spring-boot-maven-plugin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.diffplug.spotless<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>spotless-maven-plugin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>versionspan><span class="token punctuation">>span>span>2.43.0<span class="token tag"><span class="token tag"><span class="token punctuation"></span>versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>configurationspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>javaspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>eclipsespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>versionspan><span class="token punctuation">>span>span>4.33<span class="token tag"><span class="token tag"><span class="token punctuation"></span>versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>filespan><span class="token punctuation">>span>span>${project.basedir}/eclipse-formatter.xml<span class="token tag"><span class="token tag"><span class="token punctuation"></span>filespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>eclipsespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>javaspan><span class="token punctuation">>span>span><span class="token comment"><!-- Uncomment to format TypeScript files <typescript><includes><include>src/main/frontend/**/*.ts</include><include>src/main/frontend/**/*.tsx</include></includes><excludes><exclude>src/main/frontend/generated/**</exclude></excludes><prettier><prettierVersion>3.3.3</prettierVersion><configFile>.prettierrc.json</configFile></prettier></typescript>-->span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>configurationspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.vaadin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>vaadin-maven-plugin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>versionspan><span class="token punctuation">>span>span>${vaadin.version}<span class="token tag"><span class="token tag"><span class="token punctuation"></span>versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>executionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalspan><span class="token punctuation">>span>span>prepare-frontend<span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>executionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>pluginsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>buildspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>profilesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>profilespan><span class="token punctuation">>span>span><span class="token comment"><!-- Production mode is activated using -Pproduction -->span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>idspan><span class="token punctuation">>span>span>production<span class="token tag"><span class="token tag"><span class="token punctuation"></span>idspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependenciesspan><span class="token punctuation">>span>span><span class="token comment"><!-- Exclude development dependencies from production -->span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.vaadin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>vaadin-core<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>exclusionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>exclusionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.vaadin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>vaadin-dev<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>exclusionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>exclusionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependencyspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>dependenciesspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>buildspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>pluginsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>com.vaadin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>vaadin-maven-plugin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>versionspan><span class="token punctuation">>span>span>${vaadin.version}<span class="token tag"><span class="token tag"><span class="token punctuation"></span>versionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>executionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalspan><span class="token punctuation">>span>span>build-frontend<span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>phasespan><span class="token punctuation">>span>span>compile<span class="token tag"><span class="token tag"><span class="token punctuation"></span>phasespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>executionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>pluginsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>buildspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>profilespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>profilespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>idspan><span class="token punctuation">>span>span>it<span class="token tag"><span class="token tag"><span class="token punctuation"></span>idspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>buildspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>pluginsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>spring-boot-maven-plugin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>executionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>idspan><span class="token punctuation">>span>span>start-spring-boot<span class="token tag"><span class="token tag"><span class="token punctuation"></span>idspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>phasespan><span class="token punctuation">>span>span>pre-integration-test<span class="token tag"><span class="token tag"><span class="token punctuation"></span>phasespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalspan><span class="token punctuation">>span>span>start<span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>idspan><span class="token punctuation">>span>span>stop-spring-boot<span class="token tag"><span class="token tag"><span class="token punctuation"></span>idspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>phasespan><span class="token punctuation">>span>span>post-integration-test<span class="token tag"><span class="token tag"><span class="token punctuation"></span>phasespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalspan><span class="token punctuation">>span>span>stop<span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>executionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>pluginspan><span class="token punctuation">>span>span><span class="token comment"><!-- Runs the integration tests (*IT) after the server is started -->span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>groupIdspan><span class="token punctuation">>span>span>org.apache.maven.plugins<span class="token tag"><span class="token tag"><span class="token punctuation"></span>groupIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>artifactIdspan><span class="token punctuation">>span>span>maven-failsafe-plugin<span class="token tag"><span class="token tag"><span class="token punctuation"></span>artifactIdspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>executionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalspan><span class="token punctuation">>span>span>integration-test<span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>goalspan><span class="token punctuation">>span>span>verify<span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>goalsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>executionspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>executionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>configurationspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>trimStackTracespan><span class="token punctuation">>span>span>false<span class="token tag"><span class="token tag"><span class="token punctuation"></span>trimStackTracespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"><span>enableAssertionsspan><span class="token punctuation">>span>span>true<span class="token tag"><span class="token tag"><span class="token punctuation"></span>enableAssertionsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>configurationspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>pluginspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>pluginsspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>buildspan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>profilespan><span class="token punctuation">>span>span><span class="token tag"><span class="token tag"><span class="token punctuation"></span>profilesspan><span class="token punctuation">>span>span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></span>projectspan><span class="token punctuation">>span>span>

7用IDEA 运行项目工程源代码

当前视图的核心源代码

java"><span class="token keyword">packagespan> <span class="token namespace">com<span class="token punctuation">.span>example<span class="token punctuation">.span>application<span class="token punctuation">.span>views<span class="token punctuation">.span>helloworldspan><span class="token punctuation">;span><span class="token keyword">importspan> <span class="token import"><span class="token namespace">com<span class="token punctuation">.span>vaadin<span class="token punctuation">.span>flow<span class="token punctuation">.span>component<span class="token punctuation">.span>span><span class="token class-name">Keyspan>span><span class="token punctuation">;span>
<span class="token keyword">importspan> <span class="token import"><span class="token namespace">com<span class="token punctuation">.span>vaadin<span class="token punctuation">.span>flow<span class="token punctuation">.span>component<span class="token punctuation">.span>button<span class="token punctuation">.span>span><span class="token class-name">Buttonspan>span><span class="token punctuation">;span>
<span class="token keyword">importspan> <span class="token import"><span class="token namespace">com<span class="token punctuation">.span>vaadin<span class="token punctuation">.span>flow<span class="token punctuation">.span>component<span class="token punctuation">.span>notification<span class="token punctuation">.span>span><span class="token class-name">Notificationspan>span><span class="token punctuation">;span>
<span class="token keyword">importspan> <span class="token import"><span class="token namespace">com<span class="token punctuation">.span>vaadin<span class="token punctuation">.span>flow<span class="token punctuation">.span>component<span class="token punctuation">.span>orderedlayout<span class="token punctuation">.span>span><span class="token class-name">HorizontalLayoutspan>span><span class="token punctuation">;span>
<span class="token keyword">importspan> <span class="token import"><span class="token namespace">com<span class="token punctuation">.span>vaadin<span class="token punctuation">.span>flow<span class="token punctuation">.span>component<span class="token punctuation">.span>textfield<span class="token punctuation">.span>span><span class="token class-name">TextFieldspan>span><span class="token punctuation">;span>
<span class="token keyword">importspan> <span class="token import"><span class="token namespace">com<span class="token punctuation">.span>vaadin<span class="token punctuation">.span>flow<span class="token punctuation">.span>router<span class="token punctuation">.span>span><span class="token class-name">Menuspan>span><span class="token punctuation">;span>
<span class="token keyword">importspan> <span class="token import"><span class="token namespace">com<span class="token punctuation">.span>vaadin<span class="token punctuation">.span>flow<span class="token punctuation">.span>router<span class="token punctuation">.span>span><span class="token class-name">PageTitlespan>span><span class="token punctuation">;span>
<span class="token keyword">importspan> <span class="token import"><span class="token namespace">com<span class="token punctuation">.span>vaadin<span class="token punctuation">.span>flow<span class="token punctuation">.span>router<span class="token punctuation">.span>span><span class="token class-name">Routespan>span><span class="token punctuation">;span>
<span class="token keyword">importspan> <span class="token import"><span class="token namespace">org<span class="token punctuation">.span>vaadin<span class="token punctuation">.span>lineawesome<span class="token punctuation">.span>span><span class="token class-name">LineAwesomeIconUrlspan>span><span class="token punctuation">;span><span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"Hello World"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span><span class="token string">""span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">0span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">GLOBE_SOLIDspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelloWorldViewspan> <span class="token keyword">extendsspan> <span class="token class-name">HorizontalLayoutspan> <span class="token punctuation">{span><span class="token keyword">privatespan> <span class="token class-name">TextFieldspan> name<span class="token punctuation">;span><span class="token keyword">privatespan> <span class="token class-name">Buttonspan> sayHello<span class="token punctuation">;span><span class="token keyword">publicspan> <span class="token class-name">HelloWorldViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>name <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"Your name"span><span class="token punctuation">)span><span class="token punctuation">;span>sayHello <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Say hello"span><span class="token punctuation">)span><span class="token punctuation">;span>sayHello<span class="token punctuation">.span><span class="token function">addClickListenerspan><span class="token punctuation">(span>e <span class="token operator">->span> <span class="token punctuation">{span><span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"Hello "span> <span class="token operator">+span> name<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span><span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>sayHello<span class="token punctuation">.span><span class="token function">addClickShortcutspan><span class="token punctuation">(span><span class="token class-name">Keyspan><span class="token punctuation">.span><span class="token constant">ENTERspan><span class="token punctuation">)span><span class="token punctuation">;span><span class="token function">setMarginspan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span><span class="token function">setVerticalComponentAlignmentspan><span class="token punctuation">(span><span class="token class-name">Alignmentspan><span class="token punctuation">.span><span class="token constant">ENDspan><span class="token punctuation">,span> name<span class="token punctuation">,span> sayHello<span class="token punctuation">)span><span class="token punctuation">;span><span class="token function">addspan><span class="token punctuation">(span>name<span class="token punctuation">,span> sayHello<span class="token punctuation">)span><span class="token punctuation">;span><span class="token punctuation">}span><span class="token punctuation">}span>

预告：下一章 讲vaadin flow工程的项目结构和官方组件使用案例