内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

分布式存储_阿里云镜像仓库_免费领

2021-07-11 00:59 出处:欧普曼云计算 人气: 评论(0

亲爱的读者,

我希望这篇博文能帮助您在BusinessApplicationStudio中启动react的UI5Web组件。

react的UI5Web组件ui5web组件是UI5的新产品,它为您提供了一组可重用的UI元素,那云,这些元素可以用于静态Web站点,也可以用于使用您选择的任何Web框架的Web应用程序。它们允许您创建与SAP Fiori设计指南一致的用户体验,并结合Fiori 3设计。

React可作为开发单页或移动应用程序的基础。React的UI5WebComponents是建立在UI5Web之上的一个兼容Fiori3的React库组件。它同时在UI5 Web组件

Business Application Studio上提供复杂的组件和布局sapbusinessapplicationstudio是一个新的IDE,它为各种业务应用程序提供了模块化的开发环境。它在SAP云平台Cloud Foundry环境中以SaaS应用程序的形式提供

现在让我们看看逐步的过程,步骤1:转到CloudFoundry试用帐户。导航到子帐户并选择"订阅"。搜索SAP Business Application Studio

第2步:导航到SAP Business Application Studio并单击"订阅"按钮。

第3步:订阅完成后,即可使用信任配置SAP id服务将角色集合分配给您的电子邮件id。在信任配置中将以下角色添加到您的电子邮件ID中。

步骤4:现在让我们转到您的子帐户订阅并访问SAP Business Application Studio应用程序。

步骤5:您已成功登录到SAP Business Application Studio。点击创建开发空间按钮

第6步:提供开发空间名称,选择Basic,北京大数据研究院,点击创建开发空间

第7步:成功创建新开发空间后,点击开发空间名称

第8步:进入SAP Business Application Studio的开发空间。现在打开一个新的终端。

第9步:在新终端中执行以下代码。

npx create react app demo–template@ui5/webcomponents react

第10步:转到文件–>打开工作区

第11步:选择react项目"demo"并单击"打开"

第12步:您可以看到您的项目工作区。现在在终端中输入"npm start"。另外,大数据提供,请确保您的项目目录中安装了"npm install"依赖项。

步骤13:一旦编译成功,您可以看到您的应用程序正在监听端口3002。点击"曝光并打开"

第14步:你可以看到下面的屏幕

第15步:现在是时候创建你自己的组件了。创建一个名为主页.jsx归档并复制以下代码。同时安装依赖项,

npm install@ui5/webcomponents react–save

第16步:转到应用程序.js归档并导入新组件。删除现有代码并在主题提供者中添加新组件。

应用程序.js

第17步:在终端中输入"npm start",再次运行您的应用程序。现在您的应用程序看起来像是,

第18步:要开始部署过程,我们需要添加清单.yml文件在我们的项目目录中。

复制下面的代码清单.yml文件。

步骤19:现在用"npm运行构建"或"纱线构建"创建一个优化的生产构建。一旦构建成功,您可以在您的项目目录中看到生成的构建文件夹。

步骤21:如果您已经登录到您的cloud foundry,优惠券返利,您可以跳过此步骤。否则,您将收到下面的提示,询问CF端点、电子邮件Id和密码。然后在前面的提示中选择您的组织和空间。

第22步:成功登录到您的CF空间后,从您的项目目录发出"CF push"命令。现在您可以在CF空间中看到您的应用程序

即您已成功创建React应用程序,为React添加web组件并将应用程序部署到CF环境。

有关其他可用组件,请参阅以下链接,云服务器免,https://sap.github.io/ui5-webcomponents-react

在这篇博文中,我们学习了如何启用Business Application Studio、创建开发空间、创建React应用程序、为React添加Web组件、从BAS运行应用程序以及将应用程序部署到Cloud Foundry环境。

欢迎您的建议谢谢:)

分享给小伙伴们:
本文标签: 分布式存储阿里镜像仓库免费

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

签名: 验证码: 点击我更换图片

评论列表