Nodejs安装
VSCode安装
Ui5 nodejs库:Getting Started - UI5 Tooling
UI5 deploy: nwabap-ui5uploader
UI5主要用于运行编译查看UI5效果,也可以用其他控件代替,比如vscode的live server插件可以直接查看ui5的效果。
UI5 Project工程可以用Yeoman等fiori tool来自动创建也可以,在vscode插件中可以找到。
如果下载代码原有代码修改可以se38 /UI5/UI5_REPOSITORY_LOAD下载,当然这个也可以手动上传,只是用工具命令更快。
新建了一个文件夹ui5用vscode打开
1、首先是全局安装ui5库,这样就可以使用ui5命令了
npm install --global @ui5/cli
2、npm init --yes 初始化并生成package.json文件
3、创建webapp文件夹 (不然一会ui5 init会报错)
4、ui5 init
5、创建index.html, manifest.json
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrogh</title>
</head>
<body>
<div>Hello Word</div>
</body>
</html>
{
"sap.app": {
"id": "sap.ui.demo.walkthrough"
}
}
6、ui5 use SAPUI5@latest
7、ui5 serve
可以看到Server start
此时已经可以本地运行ui5程序
下面开始deploy ui5到指定程序
8、ui5 build
9、安装nwabap ui5类库:npm install -g nwabap-ui5uploader
10、创建完后在项目根目录创建.nwabaprc文件
其中配置信息如下
{
"base": "./dist",
"conn_server": "服务器web地址”
"conn_user": "用户名",
"conn_password": "密码",
"abap_package": "$TMP",
"abap_bsp": "在abap server中的名称",
"abap_bsp_text": "UI5 upload local objects"
}
11、执行npx nwabap upload
或者在package.json中配置"deploy": "npx nwabap upload"
然后用npm run deploy 也是一样
部署完就可以在server上找到了
参考Deploy UI5 Application into ABAP Repository using VSCode | SAP Blogs
UI5 Freestyle Generator wizard in VSCode | SAP Blogs