四时宝库

程序员的知识宝库

使用VSCode开发SAPUI5项目(vscode app开发)

安装nodejs

安装Yeoman

npm install -g yo

安装easy-ui5 generator

npm install -g yo generator-easy-ui5

创建一个文件夹作为工作空间,命名UI5Workspace

用NPM初始化工作空间

npm init -y

下载sapui5-runtime运行时环境

npm install -D sapui5-runtime

(可选项)安装指定的sapui5-runtime版本

如果要安装指定的sapui5-runtime版本,将以下代码加入到工作空间的package.json里

"sapui5-runtime": {
  "version": "X.Y.Z"
}

从https://tools.hana.ondemand.com/选择一个有效的版本替换X.Y.Z

然后运行 npm rebuild

创建UI5项目

yo easy-ui5

修改UI5项目中的index.html

将src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"改为src="../../resources/sap-ui-core.js"

<script id="sap-ui-bootstrap" src="../../resources/sap-ui-core.js"
    data-sap-ui-theme="sap_fiori_3" data-sap-ui-resourceroots='{
        "com.myorg.myUI5App": "./"
      }' data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" data-sap-ui-compatVersion="edge"
    data-sap-ui-async="true" data-sap-ui-frameOptions="trusted">
    </script>

添加自定义的UI5中间件来提供静态资源

npm install -D ui5-middleware-servestatic

在package.json添加UI5依赖

"ui5": {
  "dependencies": [
    "ui5-middleware-servestatic"
  ]
}

在ui5.yaml添加自定义中间件配置

server:
  customMiddleware:
  - name: ui5-middleware-servestatic
    afterMiddleware: compression
    mountPath: /resources
    configuration:
      rootPath: "./node_modules/sapui5-runtime/lib/resources"

运行npm start

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接