前言
-
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 登录验证
结果页面
