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

	
	UI5 Walkthrough


	Hello World

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博客