Docs

Documentation versions (currently viewingVaadin 24)
Documentation translations (currently viewingChinese)

本页面内容由官方文档(http://vaadin.com/docs)机器翻译而来,可能存在错误、不准确之处或错漏。Vaadin 不保证翻译内容的准确性、可靠性或时效性。

启动项目

创建并运行您的第一个 Vaadin 应用程序。

启动一个新的 Vaadin 项目的最简单方式,是通过 Vaadin Start 生成一个*行走骨架*。

行走骨架是一个最小化的应用程序,演示了所有构建模块如何交互——从 UI 到数据库。它包含三种类型的元素:可用于生产的功能用于演示的示例(理解后应删除)、以及*空占位符*。其目的是在早期验证软件架构,同时提供可参考的实现模式。

您可以通过保留可用于生产的功能、学习并替换演示示例、以及用实际实现填补占位符,来构建您的应用程序。

Tip
许多应用开发指南都包含自带行走骨架的小型教程,随后指导您逐步为其添加新功能。

您将稍后看到一份 Vaadin 行走骨架的详细演示

生成骨架

生成器会询问一些基本信息,比如 Maven 的 groupIdartifactId。这些字段已预填,只有在需要时才需修改。

接下来,请为您的用户界面选择 FlowHilla

  • 如偏向使用 Java 实现界面,请选择 Flow

  • 如偏向使用 React 和 TypeScript,请选择 Hilla

在同一个应用中可以混合使用 Flow 和 Hilla。然而,大多数项目通常只使用一种。选择依据您的团队技能和项目功能需求而定。

Tip
若需创建一个空项目,请两个选项均不勾选。

单击 Download 按钮,下载包含新项目的 zip 文件。

尝试运行

下载项目后,将其解压到您选择的目录中。

启动应用程序

在项目目录下打开终端,运行以下命令:

Source code
Terminal
./mvnw
Terminal
PowerShell
PowerShell

首次启动可能需要一些时间,因为 Maven 和 npm 会下载所需依赖项。初始化完成后,应用程序将可通过 http://localhost:8080 访问。

Tip
您处于代理环境吗?
Vaadin 在构建过程中会使用 Node.js 下载前端工具链。如果您处于代理环境,可能需要为 Node 进行代理设置。详情请参阅 Flow 参考 指南。

体验应用

应用界面如下:

在 Chrome 浏览器中运行的行走骨架

测试基础功能方法如下:

  1. 进入 Task List 视图。

  2. 在文本框中输入任务描述。

  3. 选择截止日期。

  4. 点击 Create 按钮。

新任务会显示在下方的 grid 中。

接下来,尝试在描述字段输入 fail,再次点击 Create。这会模拟一个错误,内置错误处理器会捕获并弹出错误通知。

停止应用程序

如需关闭应用程序,请在终端中按 Ctrl+C。