SAPUI5-开发环境配置-VS Code安装

398 阅读3分钟

之前用WebIDE和Eclipse自己瞎折腾过,后面忙了就一直没时间搞,很可惜的是项目上也没实战机会。

如上图,之前就发现官方不更新Eclipse里SAPUI5的工具了,本地开发推荐Visual Studio CodeWebIDE,这段时间晚上没法吃鸡,又捡起来折腾一下,搞点东西以便用来摆龙门阵吹壳子。

这篇文章主要分享一下安装Visual Studio Code的步骤,其实这些内容官方文档都清清楚楚有阐述,旮旮角角的知识都有。打开网址sapui5.hana.ondemand.com/

点击开始使用UI5,点设置开发环境内容:

如果觉得费时间,大家也可以通过SAP Community的博客或者CSDN的博客实现快速入门。

主要安装步骤

  • Node.js安装 
  • UI5 Tooling安装
  • Visual Studio Code 安装
  • Visual Studio Code Extensions扩展工具安装

PS: 这篇文章主要展示安装过程,具体每个功能的具体作用后续再写文章介绍。

一、Node.js

下载地址:nodejs.org/zh-cn/。

​编辑

下载安装包后,直接执行按默认设置一直Next安装,也可以根据需求设置安装路径等,一定选择将NPM一起安装。

安装完成后执行命令,查看是否安装成功:

node -v

执行命令,显示版本号即表示安装成功

npm-v

二、UI5 Tooling安装

执行命令,安装UI5 Tooling,全局安装

npm  install   --global@ui5/cli

安装完成后,执行命令,查看是否安装成功:我安装的比较久了,提示有新版本可更新

ui5 -v

​编辑

执行命令更新:

npm i -g @ui5/cli

​编辑

这个东西安装完在哪个位置?执行命令查看对应文件路径:

npm  list   -g

​编辑

三、Visual Studio Code安装

下载安装包:code.visualstudio.com/download

​编辑

下载完成后运行安装包,选择安装路径,然后点Next,安装完成后打开,点击Extensions图标,安装扩展工具

​编辑

搜索:SAP Fiori Tools

​编辑

点击Install安装即可,这个的作用后续我们再做介绍。

​编辑

最后SAPUI5开发会用到XML,所以建议将UI5 Language Assistant扩展一起安装。

​编辑

​编辑

至此,SAPUI5的开发环境就配置完成。