您是否找到了在Vaadin Java Web应用程序中有意义的自定义元素？也许这是您以前在npmjs.com中发表过的Web组件？

在本文中，我将通过NPMJS.COM中先前发布的自定义元素构建Java组件的步骤。本文是我在创建SimpleTimeline component for Vaadin时写过的两个学术系列的第2部分。查看Part 1，如何创建和发布Web组件。

本文并非完全是教程；它更多地写作是关于如何在创建，构建和共享vaadin附加组件时如何完成所需要做的事情的快速“命令参考”。

gh repo create MyVaadinAddon --public -p vaadin/npm-addon-template
gh repo clone MyVaadinAddon

使用Visual Studio Code和Dev容器是创建开发环境的绝佳方法。我使用了Alpine“ Java”（16-Bullseye）环境，并安装了Git和Maven。

Java组件的开发

正如我所说，这不是一个教程，我不会介绍该教程的细节。模板中axa-input-text的组件实现需要重命名和编辑。这是一个简单的技巧，可以检查您已重命名的所有内容，您可以通过文件进行操作：

grep -r "mygroup"
grep -r "AxaInputText"
grep -r "axa-input-text"

出现新名称时，一些实用提示：

• 附加名称：使用Java命名。空格还可以，但是单个小部件附加组件只能将窗口小部件类名称用作附加名称和项目名称：MyVaadinAddon。
• maven groupID：组ID必须从org.vaadin.addons开始。只需使用小写插件名称，例如，例如这里org.vaadin.addons.myvaadinddon
• Java软件包名称：使用与Maven GroupID相同。

您只需使用以下内容即可运行项目：

mvn

这运行默认的mvn jetty:run目标在localhost:8080

要运行基于浏览器的集成测试，您可以使用：

mvn verify -Pit

这将使用特殊的构建配置文件运行测试，并具有运行基于浏览器的测试所需的额外配置和依赖项。

发布到附加目录

准备好公开后，您应该首先给出有意义的版本编号。版本编号需要遵循SemVer，从1.0.0
开始是很好的做法

mvn versions:set -DnewVersion=1.0.0

然后您可以从项目中构建完整的ZIP包：

mvn -Pdirectory clean install

此命令使用Javadoc创建一个二进制软件包，并与目录和Maven存储库兼容源代码。

您第一次发布时，您需要转到https://vaadin.com/directory/my-components?uploadNewComponent上传zip文件。

最终确定开发人员体验

使vaadin目录入口愉快，有些东西可以拥有。

• 图标：512x512大小图像将出现在搜索结果和链接中。
• 摘要：简要说明该组件的用例。就像“使用此单线”为Web应用程序建立一个不错的体验。
• 代码示例：一些简短而完整的代码示例使您的用户可以快速正确地走上正确的轨道。

有一个安全的旅行！