UI5Web组件的首次发布已经快两个月了，正面反馈和兴趣的数量已经是惊人的。然而，关于如何最容易地试用全新的web组件，仍然存在一些问题。如何从NPM使用客户端库以及需要什么设置并不十分明显，特别是对于具有openui5背景的人来说，CDN托管的版本是可用的。人们一直在问，是否有一个基于CDN的web组件版本，在哪里可以找到它，数据与大数据技术，以便像jquery一样简单地使用。
从项目一开始，我们的目标就是遵循现代的最佳实践，物联网的，在运输代码中，UI5 web组件在NPM上发布为ES6模块。其目的是为每个想使用它们来创建自己的包的人。这样，每个应用程序将得到一个只包含它使用的web组件的最佳包。将此与包含CDN上托管的所有web组件的大型捆绑包进行比较，其中大多数应用程序只使用此类捆绑包中所有web组件的一小部分（甚至只有一个）。这是一个大的性能反模式，但是通过NPM的使用对于新手来说仍然是不直观的。这篇博文旨在为您提供本地使用UI5 web组件的最简单方法。
您需要下载并安装节点.js对于本文中的所有命令，
启动终端或命令提示符并输入以下命令：
这将创建一个空的节点.js可以使用ui5web组件的包。接下来，云信息，添加一个html和javascript文件，其中包含使用UI5Web组件的代码。
src/索引.html
在这个文件中，我们使用ui5按钮、ui5文本区和ui5日期选择器来突出显示四个特定功能（稍后介绍），这些功能是您在使用ui5 web组件时免费获得的。我们还包括一个脚本标记主要.js包含以下内容的应用程序：
src/主要.js
要获取我们项目中包含的UI5 Web组件的代码，我们在每个组件的文档中添加ES6模块导入语句。
此命令将下载@ui5/webcomponents的源代码，这些源代码作为节点.js包裹，把它放在node_modules文件夹中，这将是下一步所必需的。
到目前为止，启动开发服务器最简单的方法是使用零配置捆绑包。
您可以全局安装包（您只需要这样做一次）。
然后只需将包指向HTML文件并打开显示在输出以查看您的第一个应用程序运行。
在引擎盖下发生的是包裹找到主要.js从我们的索引.html，然后遵循在其中找到的import语句，并从node\u modules文件夹中查找ui5web组件的实际代码。然后创建一个JS包（类似于openui5cdn托管包）并启动一个静态web服务器，这样动态生成的包就可以在本地提供给浏览器了。现在，您可以导入任何ui5web组件，如，方法是遵循其文档页上的说明：ui5inputsample和API文档。只需在src中添加导入/主要.js或者在索引.html或者通过src内部的domapi编程/主要.js. 将Parcel用作开发服务器的酷之处在于，比购返利，它监视源文件的更改，自动重新创建包，并在任何更改时重新加载页面。您不需要在浏览器中点击"刷新"。
所有UI5 web组件都实现了SAP产品支持的标准主题。默认主题是Fiori 3（技术名称sap\u Fiori\u 3），但是您也可以通过使用URL参数来尝试伯利兹和高对比度黑色：
伯利兹：:1234?sap ui主题=sap\ U伯利兹
高对比度黑色：:1234?sap ui theme=sap\u belize\u hcb
最后，有一个全局配置设置，使组件看起来更紧凑。这对于在屏幕上包含大量数据的基于桌面的应用程序是很好的，物联网传感器，而默认的舒适外观适合移动和桌面:1234/?sap ui compactSize=true
在未来的博客文章中，我们将探讨如何从这个入门项目中创建一个可用于生产的捆绑包。
所以请继续关注并愉快地编写代码。别忘了在操场上查看其他可用的web组件。如果你想对我们迄今为止的工作表示赞赏的话，也可以在github上给这个项目一颗星星。请随时在github上打开一个问题，了解您可能希望看到的任何问题、建议或改进。
