這是 Jerry 2021 年的第 49 篇文章，也是汪子熙公眾號總共第 326 篇原創(chuàng)文章。

Jerry 2020年曾經(jīng)在 SAP 全球技術大會上，給大家分享過，SAP Commerce Cloud 新一代基于 SAP Spartacus 項目的 Storefront.這個開源項目使用到的前端框架是 Angular.

更多詳情，請參考 Jerry 的文章：Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版。

其實 SAP Spartacus 在問世之初，設計愿景之一，就是讓其具有獨立于任何前端框架，即所謂 Framework Agnostic 的特性。

最近我們組內的同事，也聊到了另一款開源的電商 Storefront 開發(fā)框架，算是 SAP Spartacus 的競爭對手吧，叫做 Vue Storefront：

https://github.com/vuestorefront

Vue Storefront 的例子表明，時至今日，前端開發(fā)生態(tài)圈，始終是 React，Angular 和 Vue，三國爭霸，三足鼎立的局面。

回到本文的主題，Jerry 之前的文章提到，同之前 SAP 云平臺 Neo 環(huán)境上傳統(tǒng)的 Full Stack WebIDE 相比，SAP Business Application Studio 是 SAP Business Technology Platform 上的云應用開發(fā)工具，在開發(fā)全棧應用時，支持的前端技術并不局限于 SAP UI5 ，而是包括 Vue.js, React 在內的眾多 HTML5 前端開發(fā)技術。

SAP Business Application Studio 具有一個開放的架構，支持安裝各種 Extensions，因而能夠從容適配云時代不斷涌現(xiàn)的各種新技術。

我們一起來看看 SAP Business Application Studio 對 Vue 開發(fā)的支持程度。

打開 Business Application Studio，創(chuàng)建一個新的 Dev Space，類型為 Basic，選擇下列三個 SAP Extensions：

HTML5 Runner
HTML5 Application Template
MTA Tools

Jerry 之前介紹 SAP Fiori Elements 開發(fā)的文章里，曾經(jīng)多次使用公網(wǎng)上的 NorthWind OData 服務，這是一個專門用于學習的 OData 服務。本文我們的 Vue 應用里，依然使用該服務。

本文會在 SAP Business Application Studio 里開發(fā)一個 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 項目創(chuàng)建向導，新建一個 HTML5 項目：

選擇 Vue.js Application 模板。Vue 模板的右邊就是 React 模板，這些模板都由之前創(chuàng)建 Dev Space 時，選擇的 HTML5 Application Template extension 所提供。

在 Data Source 選擇步驟里，從下拉菜單選擇之前在 SAP BTP 控制臺里創(chuàng)建好的 Destination：

該向導會生成一個 Vue 應用模板，包含一個表格控件，默認顯示三列。這里指定表格顯示的 OData 模型為 Categories，從下拉列表里選擇三列分別顯示 Categories 模型里的三個字段的名稱。

這樣我們一行代碼都沒有編寫，就通過向導，生成了一個可以直接運行的 Vue 應用：

在 Run Configurations 視圖里，點擊下圖高亮的插頭圖標，將該應用的 Data Source 同之前在 SAP BTP 控制臺里創(chuàng)建的 Destination 綁定。這樣，運行時 Vue 應用發(fā)起對 Data Source 的請求，就會通過綁定的 Destination，路由到 Internet 的 NorthWind OData 服務去。

成功綁定后，Data Source 節(jié)點前會出現(xiàn)一個綠色的插頭圖標。

本地預覽這個 Vue 應用，界面如下圖所示：

下一步，對該 Vue 進行 build，然后部署到 SAP BTP 平臺上。依次在右鍵菜單里選擇 Build MTA Project 和 Deploy MTA Archive 進行構建和部署：

成功部署之后，能夠在 SAP BTP 控制臺的 HTML5 Applications 面板里看到這個 Vue 應用。

點擊上圖的超鏈接，打開該應用：

把這個 URL 保存下來。

最后，我們將該 Vue 應用添加到 Fiori Launchpad 里。

進入 SAP BTP Site Manager，創(chuàng)建一個新的 Site 和新的應用，將 Vue 應用的 URL 維護到該應用 URL 字段內。

在 Site Manager 內將該應用命名為 Jerry Vue App：

把這個新的應用，分配到名為 Everyone 的 Role 之中：

創(chuàng)建一個名為 HTML5 的 Group，這個組相當于 Fiori Language 里的 tile catalog：

最終，打開我們創(chuàng)建好的 Site，能看到一個 Fiori Launchpad，包含了一個 tile，指向我們之前在 SAP Business Application Studio 里創(chuàng)建的 Vue 應用：

該 Vue 應用在 Fiori Launchpad 里打開的效果如下：

希望本文能夠幫助大家了解使用 SAP Business Application Studio 開發(fā)基于非 SAP UI5 框架的其他 HTML5 應用的基本流程。

您也許會對這些開發(fā)也感興趣：

• 用 React 開發(fā) SAP Fiori 應用

• SAP Fiori + Vue = ？

• 如何在 SAP UI5 應用中集成第三方庫 ：一個在移動設備上查看 Web 應用打印調試信息的小技巧

• 介紹一個能開發(fā)簡單 SAP UI5 應用的在線 IDE：StackBlitz

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的使用 SAP Business Application Studio 开发 Vue 应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。