使用 SAP Business Application Studio 开发 Vue 应用 / 开普饭

这是 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 服务去。