当前位置：首页 > article >正文

SAP学习笔记 - 开发04 - Fiori UI5 开发环境搭建

article 2025/1/31 17:04:45

上一章学习了 CDSView开发环境的搭建，以及CDSView相关的知识。

SAP学习笔记 - 开发03 - CDSView开发环境搭建，Eclipse中连接SAP，CDSView创建-CSDN博客

本章继续学习SAP开发相关的内容，

- Fiori UI5的开发环境搭建

- 安装VSCode

- 安装Node.js

- 安装SAP UI5

1，安装VSCode

2，安装Node.js

3，安装SAP UI5

3-1，npm install --global @ui5/cli

3-2，npm init --yes =>package.json

3-3，webapp =>manifest.json

3-4，ui5 init =>ui5.yaml

3-5，ui5 use SAPUI5@latest =>更新manifest.json

3-6，手动创建 index.html 文件

3-7，ui5 serve => 启动服务，确认结果

以下是详细内容。

1，安装VSCode

URL：Download Visual Studio Code - Mac, Linux, Windows

Windows环境的话，就点Windows那块儿

然后就点exe文件安装，跟其他安装没有区别。

2，安装Node.js

URL：https://nodejs.org/en/download/prebuilt-installer

直接点 Download Node.js

它还提供了几种安装方法，大家有兴趣都去试试有什么区别

下载之后就点exe文件安装，跟其他安装没有区别。

3，安装SAP UI5

3-1，npm install --global @ui5/cli

打开VSCode，Menu > Terminal > New Terminal，然后输入安装命令

npm install --global @ui5/cli

3-2，npm init --yes =>package.json

新建/或找一个文件夹(比如FioriTest)，cd 进入之后，输入下面命令

cd E:\SAP\FioriTest

npm init --yes

它的目的是生成 E:\SAP\FioriTest\package.json

3-3，webapp =>manifest.json

新建文件夹webapp，比如上面是 FioriTest，那就是 E:\SAP\FioriTest\webapp

然后手动创建文件E:\SAP\FioriTest\webapp\manifest.json

{
    "sap.app": {
            "id": "sap.ui.demo.walkthrough"
     }
 }

3-4，ui5 init =>ui5.yaml

在 VSCode Terminal上执行 ui5 init命令。

然后还出了下面这个错误：

PS E:\SAP\FioriTest> ui5 初始化 ui5 ：此系统上禁用脚本执行，因此文件 C:\Users\abcta\AppDat 无法加载\Roaming\npm\ui5.ps1。有关更多信息，请参阅 about_Execution_Policies “（https://go.microsoft.com/fwlink/?LinkID=135170）。发生位置行：1 字符：1 + UI5 初始化 + ~~~ + CategoryInfo : 安全错误: (: ) [], PSSecurityException + FullQualifiedErrorId ：未经授权的访问 PS E:\SAP\FioriTest>

原因就是 Powershell 策略的问题：（是否策略问题，可以启动Powershell，通过下面命令查看）

PS C:\Windows\system32> Get-ExecutionPolicy
Restricted(受限) ※这种策略的话，是不能执行外部文件的，如上面Error所示

咱们可以在Powershell上执行下面命令重新设定策略：

PS C:\Windows\system32> Set-ExecutionPolicy RemoteSigned

这样就好了，咱们再执行一遍 ui5 init，这回就没问题了。

它的目的是生成 E:\SAP\FioriTest\ui5.yaml

3-5，ui5 use SAPUI5@latest =>更新manifest.json

在 VSCode Terminal上执行 ui5 use SAPUI5@latest 命令。

它的目的是更新E:\SAP\FioriTest\ui5.yaml 文件。

更新完之后，文件变成下面这样，好像是版本变了吧：）

3-6，手动创建 index.html 文件

创建文件 E:\SAP\FioriTest\webapp\index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 Walkthrogh</title>
    </head>
    <body>
        <dir>Hello Word</dir>
    </body>
</html>