利用WebStorm开发 SAP UI5 项目

1 WebStorm开发配置

1.1 下载OpenUI5 Development Plugin

点击目录File->Setting，添加 SAP/OpenUI5 Development Plugin 插件，安装完成重启项目

1.2 新建UI5项目

在WebStorm中新建项目，选择UI5 Application

在命令行中，首先npm install grunt-cli -g全局安装grunt构建工具，然后在项目目录下通过npm install安装依赖，安装完成后，grunt serve启动项目
在main.view.xml 中添加text标签

通过浏览器查看

1.3 访问odata 测试

在manifest中配置datasource

    "ach": "ach",
    "dataSources": {
      "invoiceRemote": {
        "uri": "http://services.odata.org/V2/Northwind/Northwind.svc/",
        "type": "OData",
        "settings": {
          "odataVersion": "2.0"
        }
      }
    }
......
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "test1.i18n.i18n"
        }
      },
      "invoice": {
        "dataSource": "invoiceRemote"
      }

在xml页面中添加list组件

                <content>
                    <Text text = "hello world"/>
                    <List
                            headerText="Invoice"
                            class="sapUiResponsiveMargin"
                            width="auto"
                            items="{invoice>/Invoices}">
                        <items>
                            <ObjectListItem
                                    title="{invoice>Quantity} x {invoice>ProductName}" />
                        </items>
                    </List>
                </content>

新建chrome快捷方式，在目标后面添加-disable-web-security --user-data-dir关闭同源校验

打开浏览器访问