SAP学习笔记 - 开发14 - 前端Fiori开发 HelloWorld
之前写过几篇Fiori开发相关的文章。
SAP学习笔记 - 开发04 - Fiori UI5 开发环境搭建_sap开发环境-CSDN博客
SAP学习笔记 - 开发05 - Fiori UI5 开发环境搭建2 Fiori Tools插件安装，SEGW创建后台程序，注册服务和Gateway Client确认，从SAP抽数据显示到页面_sap fiori开发-CSDN博客
发现学的是有点儿乱，咱们这回系统学习一下。
1，Fiori开发工具的选择
- WEBIDE：官方已经不推荐使用，Skip
- BAS：SAP官方推荐使用。但是其实它就是Web版的VSCode，开发体验跟网速关系大
- VSCode：在本地开发，比较方便和流畅。当然开发完要传到BTP平台上
咱们就在VSCode上面学习，下面是Hello级创建步骤。
2，VSCode新建本地项目
开发环境就参照上面的两篇文章就可以了。
内容也可以参照官方文档或网友文章：
OpenUI5 SDK - Demo Kit
SAP OPEN UI5 Step1 环境安装和hello world - 小石王 - 博客园
2-1，npm init --yes （项目初期化）
建好一个文件夹作为项目根目录，然后cd 到该根目录
在根目录下，输入该命令
其实就是生成了package.json文件
PS E:\Fiori\FioriProject01> npm init --yes
Wrote to E:\Fiori\FioriProject01\package.json:{"name": "fioriproject01","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","type": "commonjs"
}好，这一步就OK了
2-2， 新建webapp文件夹
这里面将来会放项目文件
2-3，ui5 init （ui5初期化）
PS E:\Fiori\FioriProject01> ui5 init
Wrote ui5.yaml to E:\Fiori\FioriProject01\ui5.yaml:
specVersion: "4.0"
metadata:name: fioriproject01
type: application╭─────────────────────────────────────╮│ ││ Update available 4.0.6 → 4.0.8 ││ Run npm i -g @ui5/cli to update ││ │╰─────────────────────────────────────╯PS E:\Fiori\FioriProject01> 它的目的是生成 ut5.yaml 文件
2-4，手动新建 manifest.json 文件（webapp文件夹下）
{"sap.app": {"id": "ui5.walkthrough"}
}
2-5，ui5 use SAPUI5@latest
PS E:\Fiori\FioriProject01> ui5 use SAPUI5@latest
Updated configuration written to ui5.yaml
This project is now using SAPUI5 version 1.136.1╭──────────────────────────────────────╮│ ││ Update available 4.0.6 → 4.0.16 ││ Run npm i -g @ui5/cli to update ││ │╰──────────────────────────────────────╯PS E:\Fiori\FioriProject01> 这样就会在ui5.yaml里面生成framework段儿
这个SAPUI5 是收费的，SAP还提供了一个OpenUI5，里面的功能很相似。
SAPUI5有些功能要强大一些，毕竟是收费的嘛
SAP之所以提供OpenUI5，不是因为它高尚无私，是因为这个东西不是它原创的，是在JQuery的基础上创建的，所以它也留点儿体面嘛。
这个 1.136.0 就是openui5.hana.ondemand.com 网页上面的版本
除了这个最新版本，要是想看以前旧版的话，只需要选一下版本就可以看到了
2-6，Index.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>UI5 Walkthrough</title>
</head>
<body><div>Hello World</div>
</body>
</html>
2-7，ui5 serve （启动Server）
启动 ui5 服务
PS E:\Fiori\FioriProject01> ui5 serve
Server started
URL: http://localhost:8080
2-8，localhost:8080
点一下上面Terminal里面的URL，或直接粘到浏览器当中
再点Index.html，这样就显示出来了。
以上就是本篇的全部内容。
更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页
https://blog.csdn.net/shi_ly/category_12216766.html
东京老树根-CSDN博客