【Vaadin flow 实战】第3讲-快速上手构建VaadinFlow+Springboot的全栈web项目

最新推荐文章于 2026-05-15 08:21:45 发布

原创

最新推荐文章于 2026-05-15 08:21:45 发布 · 1k 阅读

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

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

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

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地址改成阿里云的，如下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <!-- Project from https://start.vaadin.com/project/3ad2a749-d1fb-423b-8c8b-e684877f64b8 -->
    <groupId>com.example.application</groupId>
    <artifactId>my-app2025</artifactId>
    <name>my-app2025</name>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

    <properties>
        <java.version>17</java.version>
        <vaadin.version>24.6.0</vaadin.version>
    </properties>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.4.1</version>
    </parent>



    <repositories>
<!--        <repository>-->
<!--            <id>Vaadin Directory</id>-->
<!--            <url>https://maven.vaadin.com/vaadin-addons</url>-->
<!--            <snapshots>-->
<!--                <enabled>false</enabled>-->
<!--            </snapshots>-->
<!--        </repository>-->
        <repository>
            <id>central</id>
            <url>https://maven.aliyun.com/repository/central</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </repository>
    </repositories>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <version>