这是Jerry在2021年的第49篇文章，也是王子熙的第326篇原创文章公众号。Jerry在2020年SAP全球技术大会上与大家分享了SAPCommerceCloud是基于SAPSpartacus项目的新一代Storefront。本开源项目使用的前端框架是Angular。更多内容请参考Jerry的文章：Jerry在2020SAP全球技术大会上的分享：SAPSpartacus技术介绍文字版。其实SAPSpartacus出来的时候，其中一个设计愿景就是让它独立于任何前端框架，也就是所谓的FrameworkAgnosticfeature。最近我们组的同事还聊了另一个开源的电商Storefront开发框架，可以看作是SAPSpartacus的竞争对手，叫做VueStorefront：https://github.com/vuestorefrontVueStorefront的例子可以看出，即便在今天，前端开发生态也一直是React、Angular和Vue，三国争霸，三大支柱的局面。回到本文的主题，Jerry在之前的文章中提到，相对于SAP云平台Neo环境下传统的FullStackWebIDE，SAPBusinessApplicationStudio是SAPBusinessTechnologyPlatform上的云应用开发工具。它正在开发全栈应用程序。届时，支持的前端技术不仅限于SAPUI5，还包括Vue.js、React等众多HTML5前端开发技术。SAPBusinessApplicationStudio具有开放的架构，支持安装各种Extension，因此可以轻松适应云时代新兴的各种新技术。让我们看看SAPBusinessApplicationStudio是如何支持Vue开发的。打开BusinessApplicationStudio，新建一个DevSpace，类型为Basic，选择下面三个SAPExtensions：HTML5RunnerHTML5ApplicationTemplateMTAToolsJerry在上一篇介绍SAPFioriElements开发的文章中，他使用了公众号上的NorthWindOData服务网络多次。是专用于学习的OData服务。本文中我们的Vue应用程序中仍然使用该服务。本文将在SAPBusinessApplicationStudio中开发一个Vue应用，消费NorthWindOData服务，最后将Vue服务部署到SAPBusinessTechnologyPlatform平台，所以需要在SAPBTP控制台新建一个Destination，并维护Destination中指向NorthWindOData服务的URL。这样，在运行时，SAPBTP上部署的Vue应用程序就可以通过这个Destination访问NorthWindOData服务。使用SAPBusinessApplicationStudio项目创建向导，创建一个新的HTML5项目：选择Vue.js应用程序模板。Vue模板右侧是React模板，由创建DevSpace时选择的HTML5ApplicationTemplate扩展提供。在DataSource选择步骤中，从下拉菜单中选择之前在SAPBTP控制台中创建的Destination：向导会生成一个Vue应用模板，包括一个表格控件，默认显示三列。这里将表格中显示的OData模型指定为Categories，在下拉列表中选择三列，显示Categories模型中三个字段的名称。这样，一行代码都没有写，我们就生成了一个可以直接通过向导运行的Vue应用：在RunConfigurations视图中，点击下图中高亮的插件图标，应用的DataSource为和之前SAPBTP控制台里的一样。中创建的目标绑定。这样，当Vue应用在运行时发起对DataSource的请求时，会通过绑定的Destination路由到互联网上的NorthWindOData服务。绑定成功后，DataSource节点前会出现一个绿色的插头图标。在本地预览Vue应用，界面如下图所示：接下来构建Vue，部署到SAPBTP平台。在右键菜单中选择BuildMTAProjectandDeployMTAArchive进行构建部署：部署成功后，可以在SAPBTP控制台的HTML5Applications面板中看到Vue应用。单击上面的超链接打开应用程序：保存此URL。最后，我们将Vue应用程序添加到FioriLaunchpad。进入SAPBTPSiteManager，新建一个Site和一个新的应用程序，在应用程序URL字段中维护Vue应用程序的URL。在SiteManager中将应用命名为JerryVueApp：将这个新应用分配给名为Everyone的Role：创建一个名为HTML5的Group，相当于Fiori语言中的tilecatalog：最后，打开我们创建的站点，可以看到一个FioriLaunchpad，里面有一个tile，指向我们在SAPBusinessApplicationStudio中创建的Vue应用：在FioriLaunchpad中打开Vue应用的效果如下：希望这篇文章可以帮助大家了解使用SAPBusiness的基本流程ApplicationStudio用于开发基于非SAPUI5框架的其他HTML5应用程序。您可能还对这些开发感兴趣：DevelopSAPFioriappswithReactSAPFiori+Vue=?如何在SAPUI5应用中集成第三方库：在移动设备上查看web应用打印调试信息的小技巧介绍一个可以开发简单SAPUI5应用的在线IDE：StackBlitz更多Jerry的原创文章在这里：《王子熙》“：
