使用Vscode工具搭建 SAPUI5开发环境

原创 已于 2023-04-29 19:26:06 修改 · 5.5k 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #npm #ide

于 2022-07-22 13:35:23 首次发布

文章目录

SAP UI5 在Vscode 中环境搭建-更新2023版本

1.0 安装node.js环境：

安装Node : https://nodejs.org/en/
安装Vscode: https://code.visualstudio.com/

2.0 测试node npm:

测试 node -v 是否安装成功

如何安装node.js环境可参考：Node.js 环境安装到配置环境变量

3.0 SAP-Ui5 环境搭建

3.0.1 使用功能VSCode 创建目录

打开D盘新建一个文件 【SAP UI5 WorkSpace】名字自己随便取在这里插入图片描述
安装完成了Vscode，打开Vscode 开发工具
在这里插入图片描述
找到新建的工作工作空间
在这里插入图片描述
打开终端（ctrl+shfit+`）
在这里插入图片描述
查看 目录SAP UI5 WorkSpace目录下：
在这里插入图片描述

3.0.2 安装UI5

首先安装插件：

SAP Fiori Tools - Extension Pack 
UI5 Explorer

在这里插入图片描述
在这里插入图片描述
安装完成 重启Vscode

4.0搭建UI5开发环境

4.0.1 在Vscode中新建一个文件夹作为Project [sap.ui.demo01]

在这里插入图片描述
切换目录在Project下面 cd sap…直接tab
在这里插入图片描述

4.0.2 输入： npm install --global @ui5/cli 安装UI5

 npm install --global @ui5/cli

报错1： 如果这样的界面，无法运行脚本：请参考 ：
在这里插入图片描述

搜索“powershell”，并“以管理员身份运行”
在这里插入图片描述

使用命令“set-ExecutionPolicy RemoteSigned”，将计算机上的执行策略更改为 RemoteSigned
验证是否更改成功
在这里插入图片描述

4.0.2 重新安装UI5环境

再一次重启VSCode: 输入npm install --global @ui5/cli ：安装UI5

npm install --global @ui5/cli

在这里插入图片描述
如图就OK
在这里插入图片描述

4.0.3.初始化 在Project【sap.ui.demo01】目录文件下：

npm init --yes 初始化界面 生成一个

npm init --yes

在这里插入图片描述
此时查看Vscode左侧目录，多了一个文件package.json，具体做什么先不做介绍
在这里插入图片描述

4.0.4在sap.ui.demo01文件夹下面新建一个文件夹 [webapp]

在这里插入图片描述

4.0.5 在终端里执行，生成ui5.yaml

ui5 init

如果出现这个保存，cpnm 没有安装

在这里插入图片描述
cmd 检查
在这里插入图片描述
解决办法 博客目录 5.0：

Node.js 环境安装到配置环境变量
在这里插入图片描述
等待执行完成.在这里插入图片描述
如果没有成功！就是环境变量设置有问题

‘cnpm‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件

重新输入 ui5 init
在这里插入图片描述

4.0.6 在webapp里创建manifest.json文件

manifest.json
在这里插入图片描述

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

4.0.7 执行会更新ui5.yaml

注意 ui5.yaml文件内容变化
在终端输入： ui5 use SAPUI5@latest

 ui5 use SAPUI5@latest

在这里插入图片描述

4.0.8在webapp文件夹下创建index.html文件

index.html
在这里插入图片描述
代码如下：

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

4.0.9 启动server，在a终端下执行:ui5 serve

ui5 serve

在这里插入图片描述

5.0 浏览器访问成功

本地浏览器访问：http://localhost:8080/index.html 即可 !
在这里插入图片描述更改
在这里插入图片描述
刷新浏览器 OK
在这里插入图片描述

使用 Visual Studio Code 搭建 SAP UI5 本地开发环境
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-05 1万+
工欲善其事,必先利其器。时至今日，SAP 提供了非常多的 SAP UI5 开发工具，既包含本地搭建的，也包含浏览器里远端使用的工具，比如 WebIDE 和 Business Application Studio. 我们访问下面这个链接，就能找到所有这些工具的安装或者配置步骤： https://tools.hana.ondemand.com/#sapui5 如果想选择本地开发，SAP 推荐的工具是 Visual Studio Code，也就是本文要介绍的内容。 也可以下载 WebIDE 的本地安装包，将其安
面向企业级前端应用的开发框架 UI5 的发展简史介绍
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
03-26 2687
在移动应用已经无缝融合到我们日常生活的今日，我们的工作和生活几乎时时刻刻都在和 2C(即 To Customer) 应用打交道。比如手机支付，在线购物，生活缴费，天气和交通线路查询等等。 2C 应用的前端开发框架，最著名，最为开发人员所熟知的，就是 Angular，React 和 Vue 这三驾马车。其实还有另一款名叫 UI5 的开发框架，知道它的开发人员可能少得多，但 UI5 实际上是被事实证明的在企业级前端应用开发领域里一款相当成功的开发框架。 什么是企业级前端应用？一种被前端业界公认的定义是： 企业
Vscode中搭建ABAP开发环境
Tiny~JJ的博客
09-09 2125
按照如下路径： SAP->bc->opu->odata->sap->adt_srv。新增ADT_001 Local 保存就OK。如果是如下界面，需要配置。可以查看自己的Code。
UI5-文档-2.3-使用SAPUI5工具为Eclipse开发应用程序
abbilglf665483的博客
12-10 573
用于为简单用例开发应用程序。用于Eclipse的SAPUI5应用程序开发工具提供向导来支持您以一种简单的方式创建应用程序。使用application project向导，将自动创建包含视图和控制器的必要应用程序框架。 请注意：我们只建议有经验的开发人员使用此开发环境，并且只针对简单的用例。对于所有其他目的，请使用SAP Web IDE。有关更多信息，请参见App Developmen...
3、SAPUI5开发入门：构建简单应用
最新发布
moss5的博客
11-12 14
本文介绍了SAPUI5开发的基础知识，涵盖开发前的编码规范、HTML起始页设置与框架引导、简单及复杂控件的使用方法、事件处理机制、控件API调用以及布局控件的深入应用。通过实例演示了如何构建一个基础的SAPUI5应用，并探讨了后续优化方向，如采用MVC架构提升代码可维护性，为深入学习SAPUI5打下坚实基础。
SAP UI5 环境搭建
weixin_43922846的博客
11-28 821
SAP UI5 的学习
使用纯 ABAP 开发 SAP UI5 之一：概述
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-23 955
abap2UI5是一个开源项目，提供了一种纯ABAP的方法来开发UI5应用程序，无需使用JavaScript、OData和RAP——类似于过去，只需要几行ABAP代码就可以使用选择屏幕和ALV显示输入和表格。该项目设计具有最小的系统占用，并可以在本地和云环境中运行。
如何使用 UI5 前端框架进行图表(Chart)的绘制
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
12-11 1135
目前第三方用于绘制图表(Chart)的 JavaScript 库可谓玲琅满目。我身边有不少同行，使用 UI5 这个企业级前端开发框架，开发响应式前端应用。在企业级应用领域里，常常有开发各种图表(Chart)的需求。为了实现这些需求，不少同行都选择第三方的开源库。笔者通过本文，介绍Viz 库的详细使用步骤，希望能够帮助到有类似需求的同行们。我们打开 UI5 的，找到使用 Viz 开发而成的图表应用例子：从最简单最容易入手的 Line Chart - 折线图入手开始学习。
传统SAP UI5 Vscode下开发与部署
shuishi2005的专栏
10-15 1617
SAPUI5 VSCODE开发部署
VS Code 启动SAP UI5应用
weixin_41045802的博客
03-15 965
1. 安装UI5-Tools 2. 启动UI5-Tools:Server ctrl+shift + P 显示可用插件导航栏 当此目录下仅有一个项目且此目录名为项目名时，启动server时直接打开该项目的主页 当目录下有多个项目时，启动server时，会打开UI5-Tools的启动页 ...
使用 Visual Studio Code 从零开始创建一个最简单的 SAP UI5 应用
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
01-07 1827
笔者这套教程写作之后，有朋友反馈，说教程配套的代码里，每个步骤的 SAP UI5 应用都是笔者事先创建好的，这些朋友想自己动手，从零开始创建一个全新的 SAP UI5 应用，问我具体的步骤是什么？然后弹出一个 form 表单，维护这个应用基本的信息，比如应用标题，基于的 SAP UI5 框架的版本号，创建好的应用会放置在哪个目录，诸如此类的信息。我们进入 00 文件夹的 jerrymodule 子文件夹，就能看到创建好的 SAP UI5 应用的源代码了，如下图所示。
SAPUI5(SAP Fiori)开发工具介绍
06-23
SAPUI5, SAP Fiori开发工具介绍文档, 更多：http://edu.youkuaiyun.com/course/detail/5046
SAP UI5 OData开发
08-29
SAP UI5作为前端开发框架，使用SAP Gataway开发后端OData Service
让 Visual Studio Code 本地开发 SAP UI5 体验更丝滑的一些 Extensions，推荐安装
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
12-11 497
除了笔者下面两篇文章提到的 Visual Studio Code 扩展之外，本文介绍的是笔者自己在 SAP UI5 开发过程中使用的 Visual Studio Code Extensions，能提高不少开发效率。请大家根据自己实际的需要决定是否安装。
SAP Fiori UI5 开发环境搭建和部署（含增强开发）
Cappuccino0001的博客
06-09 1458
本文介绍了 SAPUI5、OpenUI5 和 Fiori 的关系,记录了使用 VSCode 进行 Fiori 开发的步骤：环境搭建、两种开发模式（自由开发和增强开发）的工程创建与运行，以及应用部署和磁贴发布的完整流程。
使用 UI5 Tools 这款 Visual Studio Code 扩展来管理和运行本地 SAP UI5 应用
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-29 1343
本文介绍 Visual Studio Code 的 UI5 Tools 扩展是如何帮助 SAP UI5 开发人员管理和启动本地 SAP UI5 应用的详细操作步骤。
VSCode自动化：实现点击VSCode图标——基于Electron框架的应用程序的UI自动化
zc180248的博客
07-10 2038
VSCode的界面元素跟谷歌浏览器一样，可以使用selenium来进行定位和模拟用户操作。
SAP UI5 开发的四大开发工具综述
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-19 1341
SAP 官方推荐的 SAP UI5 开发工具是本地开发工具 Visual Studio Code，或者是云端的 Business Application Studio.而在 WebIDE 和 Business Application Studio 这两款云端开发工具之间，SAP 也推荐大家使用后者。
探索 SAP UI5 Tooling：构建现代Web应用的新锐利器
gitblog_00042的博客
04-18 402
探索 SAP UI5 Tooling：构建现代Web应用的新锐利器 ui5-toolingAn open and modular toolchain to develop state of the art applications based on the UI5 framework项目地址:https://gitcode.com/gh_mirrors/ui/ui5-tooling 如果你是UI...
VSCODE ui5环境变量设置
01-27
### 如何在 VSCode 中配置 UI5 项目所需的环境变量 #### 设置本地环境变量 对于 UI5 开发，在 VSCode 中可以通过多种方式来设置环境变量。一种常见的方式是在启动应用程序之前通过命令行工具或集成终端来进行设定。 如果希望这些变量仅应用于特定的项目，则可以在项目的根目录创建 `.env` 文件并利用扩展程序如 `dotenv` 来加载此文件中的键值对作为进程级别的环境变量[^1]。 另一种方法是修改 Windows 的用户或系统级别环境变量，但这通常用于全局性的配置而非针对单个项目。具体操作可以参照为 MinGW-GCC 编译器添加到 PATH 变量的方法[^3]，不过这里会把与 UI5 相关的内容（比如 SAPUI5 资源服务器的位置或其他自定义参数）加入进去而不是编译器路径。 #### 使用 launch.json 进行调试时传递环境变量 为了更方便地管理不同运行模式下的环境差异，推荐的做法是在 `.vscode/launch.json` 文件里指定环境变量。这样做的好处是可以根据不同场景灵活调整而不需要更改实际的操作系统环境设置。下面是一个简单的例子： ```json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/index.js", "env": { "OPenui5_URL": "https://openui5.hana.ondemand.com/resources/sap-ui-core.js" } } ] } ``` 在这个 JSON 片段中，“OPenui5_URL” 是一个示例环境变量，它指定了 OpenUI5 库的服务端位置。可以根据实际情况替换为你自己的 URL 或其他必要的环境变量名称和对应的值。 #### 利用 tasks.json 执行预构建任务 有时可能还需要执行某些脚本来准备开发环境或是清理工作区等前置动作。这时就可以借助于 `.vscode/tasks.json` 定义的任务功能。例如，你可以编写一条命令去更新 npm 包或者是调用 grunt/gulp 构建流程，并且同样可以在其中声明临时使用的环境变量。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值