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