generator-sapui5-templates 包含根据 3 种模板搭建脚手架代码和测试的工具集。package 的 url:
@sapui5/generator-sapui5-templates
本篇博文介绍 generator-sapui5-templates 的基本使用方法，使用 Visual Studio Code 作为编辑器。假设你的电脑上已经安装 node.js。
环境准备
- node.js
- yo
node.js 的安装比较简单，不说明。安装 node.js 后，在命令行中使用下面的命令全局安装 yo:
# install yo
npm install --global yo
安装 generator-sapui5-templates
我们可以参照 @sapui5/generator-sapui5-templates 的说明，选择是以 global 还是 local 的方式进行安装。
假设我们选择 local 方式安装。首先创建一个文件夹，用 Visual Studio Code 打开该文件夹。打开 VS Code 的 Terminal 窗口 (Windows 版本的快捷键为 Shift + Esc)。在 Terminal 窗口中输入如下命令：
npm install @sapui5/generator-sapui5-templates --save-dev
安装后，在 Terminal 窗口使用下面的命令检查是否安装成功：
yo --generators
显示结果如下，表示安装成功。
D:\openui5-demo>yo --generators
Available Generators:
@sapui5/sapui5-templates
1worklist
2masterdetail
3worklistodatav4
构建 OpenUI5 项目
接下来，我们利用 generators 搭建一个 OpenUI5 项目，展示 https://services.odata.org/V2/Northwind/Northwind.svc/ 提供的 OData Service 中 Products 数据。先在浏览器中查看 Products 数据，可以基于下面的 url。如果你对 OData 的规范不熟悉，请参考其他文档进行熟悉。
https://services.odata.org/V2/Northwind/Northwind.svc/Products?$format=json
在 VS Code 的 Terminal 窗口输入下面的命令：
yo @sapui5/sapui5-templates
然后根据提示填写值：
扫描二维码关注公众号，回复：
12894359 查看本文章
D:\openui5-demo> yo @sapui5/sapui5-templates
? Provide the module name OpenUI5Demo
? Provide the module namespace com.stonewang
? Select a template
SAP Fiori Worklist Application
> SAP Fiori Master-Detail Application
SAP Fiori Worklist Application OData V4
在第三步，可以使用光标上下移动进行选择。选择 Master-Detail Application。其他项也根据提示填写，我填写的值如下：
下面是 generator 返回的结果：
D:\openui5-demo> yo @sapui5/sapui5-templates
? Provide the module name OpenUI5Demo
? Provide the module namespace com.stonewang
? Select a template SAP Fiori Master-Detail Application
? Title Northwind Product List
? Description Product List
? Choose if your app should run in SAP Fiori Launchpad or standalone Standalone App (optimized for individual deployment)
? Service Base URI https://services.odata.org/V2/Northwind/Northwind.svc/
? Datasource URL /srv/
? Object Collection Products
? Object Collection ID ProductID
? Object Title ProductName
? Object Numeric Attribute UnitPrice
? Object Unit of Measure
? Line Item Collection
? Line Item Collection ID
? Line Item Title
? Line Item Numeric Attribute
? Line Item Unit of Measure
create package.json
create .npmignore
create .npmrc
create ui5.yaml
create webapp\Component.js
create webapp\controller\App.controller.js
create webapp\controller\BaseController.js
create webapp\controller\Detail.controller.js
create webapp\controller\DetailObjectNotFound.controller.js
create webapp\controller\DetailObjectNotFound.js
create webapp\controller\ErrorHandler.js
create webapp\controller\ListSelector.js
create webapp\controller\Master.controller.js
create webapp\controller\NotFound.controller.js
create webapp\i18n\i18n.properties
create webapp\index.html
create webapp\localService\metadata.xml
create webapp\localService\mockserver.js
create webapp\manifest.json
create webapp\model\formatter.js
create webapp\model\models.js
create webapp\test.html
create webapp\test\initMockServer.js
create webapp\test\integration\AllJourneys.js
create webapp\test\integration\BusyJourney.js
create webapp\test\integration\BusyJourneyPhone.js
create webapp\test\integration\MasterJourney.js
create webapp\test\integration\NavigationJourney.js
create webapp\test\integration\NavigationJourneyPhone.js
create webapp\test\integration\NotFoundJourney.js
create webapp\test\integration\NotFoundJourneyPhone.js
create webapp\test\integration\PhoneJourneys.js
create webapp\test\integration\arrangements\Startup.js
create webapp\test\integration\opaTests.qunit.html
create webapp\test\integration\opaTests.qunit.js
create webapp\test\integration\opaTestsPhone.qunit.html
create webapp\test\integration\opaTestsPhone.qunit.js
create webapp\test\integration\pages\App.js
create webapp\test\integration\pages\Browser.js
create webapp\test\integration\pages\Common.js
create webapp\test\integration\pages\Detail.js
create webapp\test\integration\pages\Master.js
create webapp\test\integration\pages\NotFound.js
create webapp\test\mockServer.html
create webapp\test\testsuite.qunit.html
create webapp\test\testsuite.qunit.js
create webapp\test\unit\AllTests.js
create webapp\test\unit\controller\ListSelector.js
create webapp\test\unit\model\formatter.js
create webapp\test\unit\model\models.js
create webapp\test\unit\unitTests.qunit.html
create webapp\test\unit\unitTests.qunit.js
create webapp\view\App.view.xml
create webapp\view\Detail.view.xml
create webapp\view\DetailObjectNotFound.view.xml
create webapp\view\Master.view.xml
create webapp\view\NotFound.view.xml
create webapp\view\ViewSettingsDialog.fragment.xml
使用 npm install 命令安装依赖，然后使用 npm start 启动服务器端程序。客户端界面如下：
