这是一个纯粹的"学术"项目，物联网网关，旨在更好地了解如何在没有任何框架（如React、Angular或Vue）的情况下使用UI5 Web组件。
我的目标是创建博客系列，我们将在其中讨论以下主题
UI5 Web组件入门使用模板标签增强我们的示例让我们创建一个包我讨厌待办事项列表，所以我们创建了一个购物列表示例其他主题，如i18n、主题化和创建自己的ui5web组件
ui5web组件入门
这个博客是我在saptecheed2020期间共同攻克的成果。我想首先了解ui5web组件是如何工作的，以及如何使用它们。马吕斯·奥伯特（Marius Obert）那篇出色的博客文章让我很好奇，但我对React、Angular或Vue不太熟悉。我想把事情简单化。我更多的是一个动手的人（#HandsOnSAPDev），一旦我理解了（或认为我理解了）基本概念，我就渴望开始构建东西。
我们在第一个博客中要做的是创建一个简单的webapp，它将包含一个UI5表和按钮。该按钮将触发在我们的表中显示数据。
最后它应该像官方文档UI5 Web组件表中提供的表示例。
警告！我使用的现代JavaScript语法可能不适用于旧浏览器。请使用现代浏览器。
所以让我们用npm初始化我们的项目来弄脏我们的手。
我们将创建一个HTML和一个JavaScript文件来分开。我的意思是描述内容的形式（HTML）和实际的逻辑（JavaScript）。
在此之前，我们应该知道如何创建ui5web组件。查看官方文档，有两种方法可以创建ui5web组件元素
使用Web组件定义的HTML标记使用HTMLDOMAPI例如createElement
好的，让我们这样做并创建我们的HTML文件。为了加快速度，我从官方文件中复制了这张表。
这里没什么特别的。我们声明一个表并创建列。没有表行或单元格实际显示任何产品数据。
是的，我们做到了！我们在HTML页面中成功地使用了ui5web组件。还是我们？
我们还没到。仅仅因为有一个标签并不意味着浏览器知道如何处理它。我们必须让浏览器知道标签和它应该如何呈现（请使用UI5和Fiori样式）。
ui5web组件作为ES6模块交付。为了使用模块，我们实际上需要得到它们。所以我们运行：
现在我们在"node\u modules"文件夹中有了UI5 Web组件。太好了。
嗯，微信淘客，在你最喜欢的网页浏览器中打开网页仍然会显示控制台中的错误。
我们要实现的是，所需的UI5网页组件已经实际加载。查看文档，我们发现以下语句：
很好，现在我们知道该怎么做了，但是我们仍然不清楚该把代码放在哪里。阅读另一个教程，我们意识到我们必须创建一个JavaScript文件，在其中放置import语句。我们希望将JavaScript文件保存在不同的文件夹中，以便快速创建一个
创建一个新文件`索引.js`并在其中添加导入语句。没有别的。
另外，我们必须在HTML文档中加载JavaScript。
最后！我们已经准备好随时可以看到我们漂亮的UI5桌子了…
什么？
这个错误告诉我们，在浏览器中打开html文件时，我们不能只加载正在导入ES6模块的js文件。
因此我们需要一个本地web服务器来运行我们的UI5 web组件应用程序。NPM去救援！
有很多选项可供选择，但我找到了Web开发服务器，它是现成的。这就是我现在想要的。最重要的是，导入的ES6模块（位于node\u modules文件夹中）可以由该web服务器解析，而无需涉及任何捆绑包，如Webpack、Snowpack、Rollup、packet等。我们将在稍后的博客文章中查看捆绑程序。
要使用它，我们将安装它作为开发依赖项
让我们编辑包.json文件并添加一个npm命令来启动服务器
现在所要做的就是运行命令并看到"神奇的发生"。
Jippie，我们终于看到了我们的空表。这似乎是一个努力，但一旦你得到了基本的设置，大数据研发，你就为实现真正的东西做好了准备。
好，现在我们可以添加一些数据到我们的表中。作为初学者，我们将从本地的.json文件加载数据（稍后将添加从我们喜爱的NorthWind OData服务获取数据）
我们开始用数据填充表的按钮仍然缺失。因此，让我们添加ui5web组件按钮。第一件事。让我们导入按钮，然后添加HTML标记。
。/src/索引.js
内部索引.html我们把按钮直接放在表的下面。
如果我们用本地dev web服务器会话打开浏览器，我们现在会看到这个
但是一旦单击按钮，我们如何填充数据？让我们再看一下文档。如果一直向下滚动，可以看到ui5按钮的可用事件。它还提供了一个如何绑定到click事件的解决方案。
现在我们"只"需要从DOM获取ui5按钮并注册一个事件侦听器。从DOM中获取元素可以使用文档Web API的方法来完成。
我们将使用强大的querySelector方法来获取我们的ui5按钮。如果你想了解更多关于CSS选择器的信息，大数据说，请看这里。
