SAP Fiori VS Code 开发环境「部署」

前言

• Eclipse & SAPUI5 Tools for Eclipse （已停止维护更新） 开发「消息源」

• SAP Web IDE Personal Edition. Updated: December 4, 2018.

因此，我们将选择 VS Code + SAP Fiori Tools 的开发方式

SAP Fiori Tools 上次更新时间 2022/10/19 11:55:33 本篇文章撰写日期 2022/10/27

• VS Code 安装
• Node.js 安装 & 配置
• SAP Fiori Tools - Extension Pack 安装
• Hello World
• OpenUI5 Site

---

VS Code 安装

• 官网 Visual Studio Code 下载，安装即可

---

Node.js 配置

我比较喜欢免安装版，因此下面会提供两种方法，任选其一即可

直装版

官网 Node.js 下载，安装一路下一步，完成即可

测试安装成功

node -v & npm - v 测试

---

免安装

Node.js 官网，找到 Previous Releases 进入

注意 Node.js 版本选择 10.12+ 的版本, SAP 部分依赖包不支持低版本 node（截至 2022.10.27）

找到需要的版本，点击 Downloads

按需选择下载即可

配置环境变量

• 配置到 Path 中：{Node.js_root}
• 如果你的 配置界面是只有一行的格式，那么需要在前一项后面加 ; 分隔配置项
• e.g. D:{jdk_bin_root};D:{Node.js_root}

测试环境配置是否生效

node -v & npm - v 测试

---

SAP Fiori Tools 安装

「扩展」页签，查找 Fiori相关，安装 SAP Fiori Tools - Extension Pack

注意：需要安装 全部 扩展包

---

Hello World

• Ctrl + Shift + P 唤出 Command 面板
• 输入 Fiori，提示项选择 Fiori: Open Application Generator
• 框选区域可以看到还有很多其他 Fiori 的相关 Tools，可自行了解

这里按需选择 Fiori Elements 还是 UI5 自己设计

我这里选择 SAPUI5 freestyle 的 SAPUI5 Application 空白页

这里需要配置我们的后端 Data source，这里我用到的是 OData Service 作为数据源

关于 OData Service URL，可以参见我的文章「SAP 发布 OData Service」

如果目前没有 URL，可以使用 OData Test Service：OData Service URL

• 项目详细信息，如模块名称、应用程序标题、项目存储路径 etc.
• 注意 Minimum SAPUI5 version 的选择「版本建议」
• 不建议与 SAP 系统配置的 UI5 版本 跨度太大，否则会出现不兼容

• 点击完成，会安装配置相关依赖，提示重新选择工作区，并重新打开即可
• 项目结构类似于 Web IDE，除了一两个特定于 VSCode 的附加文件

唤出 终端，npm start 本地跑一个 server，看下效果

SAP System 登录验证

结果页面

参考文章

• Setting up Visual Studio Code for UI5 development – part1