这是 Jerry 2021 年的第 49 篇文章，也是汪子熙公众号总共第 326 篇原创文章。
Jerry 2020 年已经在 SAP 寰球技术大会上，给大家分享过，SAP Commerce Cloud 新一代基于 SAP Spartacus 我的项目的 Storefront. 这个开源我的项目应用到的前端框架是 Angular.
更多详情，请参考 Jerry 的文章：Jerry 在 2020 SAP 寰球技术大会的分享：SAP Spartacus 技术介绍的文字版 。
其实 SAP Spartacus 在问世之初，设计愿景之一，就是让其具备独立于任何前端框架，即所谓 Framework Agnostic 的个性。
最近咱们组内的共事，也聊到了另一款开源的电商 Storefront 开发框架，算是 SAP Spartacus 的竞争对手吧，叫做 Vue Storefront：
https://github.com/vuestorefront
Vue Storefront 的例子表明，时至今日，前端开发生态圈，始终是 React，Angular 和 Vue，三国争霸，三足鼎立的场面。
回到本文的主题，Jerry 之前的文章提到，同之前 SAP 云平台 Neo 环境上传统的 Full Stack WebIDE 相比，SAP Business Application Studio 是 SAP Business Technology Platform 上的云利用开发工具，在开发全栈利用时，反对的前端技术并不局限于 SAP UI5，而是包含 Vue.js, React 在内的泛滥 HTML5 前端开发技术。
SAP Business Application Studio 具备一个凋谢的架构，反对装置各种 Extensions，因此可能从容适配云时代不断涌现的各种新技术。
咱们一起来看看 SAP Business Application Studio 对 Vue 开发的反对水平。
关上 Business Application Studio，创立一个新的 Dev Space，类型为 Basic，抉择下列三个 SAP Extensions：
HTML5 Runner
HTML5 Application Template
MTA Tools
Jerry 之前介绍 SAP Fiori Elements 开发的文章里，已经屡次应用公网上的 NorthWind OData 服务，这是一个专门用于学习的 OData 服务。本文咱们的 Vue 利用里，仍然应用该服务。
本文会在 SAP Business Application Studio 里开发一个 Vue 利用，生产 NorthWind OData 服务，最初会把该 Vue 服务部署到 SAP Business Technology Platform 平台上，所以须要在 SAP BTP 控制台新建一个 Destination，在该 Destination 内保护指向 NorthWind OData 服务 的 URL.
这样，在运行时，部署在 SAP BTP 上的 Vue 利用，可能通过该 Destination 拜访 NorthWind OData 服务。
应用 SAP Business Application Studio 我的项目创立向导，新建一个 HTML5 我的项目：
抉择 Vue.js Application 模板。Vue 模板的左边就是 React 模板，这些模板都由之前创立 Dev Space 时，抉择的 HTML5 Application Template extension 所提供。
在 Data Source 抉择步骤里，从下拉菜单抉择之前在 SAP BTP 控制台里创立好的 Destination：
该向导会生成一个 Vue 利用模板，蕴含一个表格控件，默认显示三列。这里指定表格显示的 OData 模型为 Categories，从下拉列表里抉择三列别离显示 Categories 模型里的三个字段的名称。
这样咱们一行代码都没有编写，就通过向导，生成了一个能够间接运行的 Vue 利用：
在 Run Configurations 视图里，点击下图高亮的插头图标，将该利用的 Data Source 同之前在 SAP BTP 控制台里创立的 Destination 绑定。这样，运行时 Vue 利用发动对 Data Source 的申请，就会通过绑定的 Destination，路由到 Internet 的 NorthWind OData 服务去。
胜利绑定后，Data Source 节点前会呈现一个绿色的插头图标。
本地预览这个 Vue 利用，界面如下图所示：
下一步，对该 Vue 进行 build，而后部署到 SAP BTP 平台上。顺次在右键菜单里抉择 Build MTA Project 和 Deploy MTA Archive 进行构建和部署：
胜利部署之后，可能在 SAP BTP 控制台的 HTML5 Applications 面板里看到这个 Vue 利用。
点击上图的超链接，关上该利用：
把这个 URL 保留下来。
最初，咱们将该 Vue 利用增加到 Fiori Launchpad 里。
进入 SAP BTP Site Manager，创立一个新的 Site 和新的利用，将 Vue 利用的 URL 保护到该利用 URL 字段内。
在 Site Manager 内将该利用命名为 Jerry Vue App：
把这个新的利用，调配到名为 Everyone 的 Role 之中：
创立一个名为 HTML5 的 Group，这个组相当于 Fiori Language 里的 tile catalog：
最终，关上咱们创立好的 Site，能看到一个 Fiori Launchpad，蕴含了一个 tile，指向咱们之前在 SAP Business Application Studio 里创立的 Vue 利用：
该 Vue 利用在 Fiori Launchpad 里关上的成果如下：
心愿本文可能帮忙大家理解应用 SAP Business Application Studio 开发基于非 SAP UI5 框架的其余 HTML5 利用的根本流程。
您兴许会对这些开发也感兴趣：
- 用 React 开发 SAP Fiori 利用
- SAP Fiori + Vue =？
- 如何在 SAP UI5 利用中集成第三方库：一个在挪动设施上查看 Web 利用打印调试信息的小技巧
- 介绍一个能开发简略 SAP UI5 利用的在线 IDE：StackBlitz
更多 Jerry 的原创文章，尽在：” 汪子熙 ”: