使用Vscode工具搭建 SAPUI5开发环境

已于 2023-04-29 19:26:06 修改
阅读量3.4k 收藏 22
点赞数 6
分类专栏： SAPUI5 文章标签： vscode npm ide
于 2022-07-22 13:35:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45824905/article/details/125930385
版权

文章目录

SAP UI5 在Vscode 中环境搭建-更新2023版本

1.0 安装node.js环境：

安装Node : https://nodejs.org/en/
安装Vscode: https://code.visualstudio.com/

2.0 测试node npm:

测试 node -v 是否安装成功

如何安装node.js环境可参考：Node.js 环境安装到配置环境变量

3.0 SAP-Ui5 环境搭建

3.0.1 使用功能VSCode 创建目录

打开D盘新建一个文件 【SAP UI5 WorkSpace】名字自己随便取在这里插入图片描述
安装完成了Vscode，打开Vscode 开发工具
在这里插入图片描述
找到新建的工作工作空间
在这里插入图片描述
打开终端（ctrl+shfit+`）
在这里插入图片描述
查看 目录SAP UI5 WorkSpace目录下：
在这里插入图片描述

3.0.2 安装UI5

首先安装插件：

SAP Fiori Tools - Extension Pack 
UI5 Explorer

在这里插入图片描述
在这里插入图片描述
安装完成 重启Vscode

4.0搭建UI5开发环境

4.0.1 在Vscode中新建一个文件夹作为Project [sap.ui.demo01]

在这里插入图片描述
切换目录在Project下面 cd sap…直接tab
在这里插入图片描述

4.0.2 输入： npm install --global @ui5/cli 安装UI5

 npm install --global @ui5/cli

报错1： 如果这样的界面，无法运行脚本：请参考 ：
在这里插入图片描述

搜索“powershell”，并“以管理员身份运行”
在这里插入图片描述

使用命令“set-ExecutionPolicy RemoteSigned”，将计算机上的执行策略更改为 RemoteSigned
验证是否更改成功
在这里插入图片描述

4.0.2 重新安装UI5环境

再一次重启VSCode: 输入npm install --global @ui5/cli ：安装UI5

npm install --global @ui5/cli

在这里插入图片描述
如图就OK
在这里插入图片描述

4.0.3.初始化 在Project【sap.ui.demo01】目录文件下：

npm init --yes 初始化界面 生成一个

npm init --yes

在这里插入图片描述
此时查看Vscode左侧目录，多了一个文件package.json，具体做什么先不做介绍
在这里插入图片描述

4.0.4在sap.ui.demo01文件夹下面新建一个文件夹 [webapp]

在这里插入图片描述

4.0.5 在终端里执行，生成ui5.yaml

ui5 init

如果出现这个保存，cpnm 没有安装

在这里插入图片描述
cmd 检查
在这里插入图片描述
解决办法 博客目录 5.0：

Node.js 环境安装到配置环境变量
在这里插入图片描述
等待执行完成.在这里插入图片描述
如果没有成功！就是环境变量设置有问题

‘cnpm‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件

重新输入 ui5 init
在这里插入图片描述

4.0.6 在webapp里创建manifest.json文件

manifest.json
在这里插入图片描述

{
    "sap.app": {
        "id": "sap.ui.demo.walkthrough"
    }
}

4.0.7 执行会更新ui5.yaml

注意 ui5.yaml文件内容变化
在终端输入： ui5 use SAPUI5@latest

 ui5 use SAPUI5@latest

在这里插入图片描述

4.0.8在webapp文件夹下创建index.html文件

index.html
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 Walkthrogh</title>
    </head>
    <body>
        <div>Hello Word</div>
    </body>
</html>

4.0.9 启动server，在a终端下执行:ui5 serve

ui5 serve

在这里插入图片描述

5.0 浏览器访问成功

本地浏览器访问：http://localhost:8080/index.html 即可 !
在这里插入图片描述更改
在这里插入图片描述
刷新浏览器 OK
在这里插入图片描述

Austin_YB
关注
  • 6
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
SAP UI5 环境搭建
weixin_43922846的博客
11-28 643
SAP UI5 的学习
OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（上）
qianmarv的博客
07-23 2814
OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（上） 1 扫盲 什么是SAP Fiori？ 了解SAP UI5必须要从SAP Fiori开始，两者概念经常被混淆，而两者也确实有着非常紧密的关系。 用过SAP的同学们都对SAP的传统的界面（SAP GUI）表示“呵呵”，其实传统的SAP GUI的界面功能还是很强大的，但是对于一个新用户来说，学会使用这套界面就需要花上一
SAPUI5-开发环境配置-VS Code安装
总钻风来巡山
12-17 1060
SAPUI5 VScode
UE5配置vscode开发环境
weixin_44666711的博客
05-22 476
UE5.3配置vscode开发环境，配置c++插件，vscode编辑器中如何编译生成UE5任务。编译报错处理
VS Code 启动SAP UI5应用
weixin_41045802的博客
03-15 726
1. 安装UI5-Tools 2. 启动UI5-Tools:Server ctrl+shift + P 显示可用插件导航栏 当此目录下仅有一个项目且此目录名为项目名时，启动server时直接打开该项目的主页 当目录下有多个项目时，启动server时，会打开UI5-Tools的启动页 ...
sap UI5开始教程——环境配置和helloworld
qq_54432686的博客
10-19 391
现在，启动网络服务器，提供“webapp”文件夹的源代码，然后在浏览器中打开 index.html 文件，或者直接进入网址：http://localhost:8080/index.html。我们加载来两个 UI 控件 —— 一个按钮和一个消息 toast ——并将按钮放在具有内容 ID 的元素中。这样，我们可以轻松地引用将在此步骤中创建的其他文件。为了方便起见，我们使用 OpenUI5 的内容交付网络(CND)路径。标签，我们使用典型的引导参数加载和初始化 SAPUI5。
传统SAP UI5 Vscode下开发与部署
shuishi2005的专栏
10-15 1110
SAPUI5 VSCODE开发部署
SAP Fiori 学习-搭建Vscode开发环境+helloworld
weixin_52957028的博客
10-31 1132
2.下载nodejs（启用NPM服务），关闭vscode后安装，否则在vscode里面首次运行npm命令报错。5.Vscode下打开文件夹，进入Fioristudio 文件夹（首次打开选择信任）。4.D盘下手动新建项目文件夹Fioristudio（名称随意，非中文路径下）。7.在Fiorisutdio下，创建webapp（必须用这个名称）文件夹。10.在fioristudio下执行，更新ui5.yaml至最新。8.在Fiorisutdio下，生成ui5.yaml。更新ui5版本（ui5.yaml会更新）。
SAPUI5-基础知识-概念&学习路径
总钻风来巡山
12-22 704
SAPUI5 基础知识
SAPUI5教程——最全中文学习指南（必看）
weixin_30606461的博客
08-05 564
前言 技术的变革日新月异，求知的迫切与日俱增，现如今云计算，大数据，虚拟现实，无一不充斥着我们的眼帘，这一切的宗旨，旨在为凭借更高的体验，满足更多的需求，追求更高的价值，创造更多的利益。 那么我们今天要讲的是SAP公司所推出的一个革新的用户体验——SAP Fiori,SAP Fiori其实是一个很大的概念，可以称之为一套系统，更可以称为一个框架，其架构理念旨在为简化传统的操作流程，提供其...
手把手教你搭建VUE+VScode+elementUI开发环境
热门推荐
wdyan297的博客
05-16 1万+
通过详细的步骤描述和截图说明，手把手教前端新手搭建VUE+VScode+elementUI开发环境。
SAP UI5入门概述
05-14
SAP UI5入门级资料
Windows使用VSCode工具搭建嵌入式Linux开发环境
最新发布
07-08
Windows使用VSCode工具搭建嵌入式Linux开发环境 嵌入式开发环境搭建，分析内核源码，进行驱动代码以及应用层代码开发
使用VScode搭建ROS开发环境的教程详解
08-18
使用VScode搭建ROS开发环境的教程详解 本教程旨在指导读者使用VScode搭建ROS开发环境，并实现ROS项目的开发和调试。ROS（Robot Operating System，机器人操作系统）是一个开源的操作系统，可以应用于机器人、自动化...
VsCode搭建Java开发环境的方法
08-26
那么，如何使用VsCode搭建Java开发环境呢？下面我们将一步一步地介绍VsCode搭建Java开发环境的方法。 一、安装Java插件 在VsCode中，我们需要安装Java插件来支持Java开发。我们可以在扩展视图中搜索“java”关键词...
vscode搭建32位MCU开发环境
08-09
在本文中，我们将详细探讨如何使用Visual Studio Code (VSCode) 搭建32位微控制器（MCU）的开发环境，特别是针对基于GCC编译器和GDB调试器的MM32F3270芯片。我们将涵盖以下几个关键知识点： 1. **VSCode介绍**：...
在VsCode中搭建Go开发环境的配置教程
09-16
在本文中，我们将详细介绍如何在Visual Studio Code (VsCode) 中搭建Go语言的开发环境。首先，确保你已经安装了最新版本的Go。你可以访问Go中文网 () 下载适合你操作系统的安装包，按照提示进行安装。无论是Windows...
VS CODE环境安装和hello world
SAP_老茂
04-06 505
这个信息说明npm正在构建，如一直停留在这个界面，检查下网络，例如是否连接的是内网等。首先要安装nodejs，然后才能执行下面的操作。
sap ui5教程（0）简介、环境搭建、创建项目
Yichair的博客
01-13 5243
因为去sap公司实习原因，即将接触sap ui5框架，这里记录我对sap ui5的学习过程 1、简介 SAP UI5： sap ui5是sap公司推出的前端 UI框架，用js编写，有丰富的组件可以组合使用。 OpenUI5: SAP UI5的开源版本，核心框架和SAP UI5一样，但移除了一些库 模式： sap ui5采用MVC（model业务模型,view显示页面,controlle
如何在vscode中搭建esp32c3开发环境
05-31
搭建esp32c3开发环境需要以下步骤： 1. 下载安装Visual Studio Code（VSCode）和PlatformIO IDE插件； 2. 在VSCode左侧菜单栏中选择PlatformIO，进入PlatformIO Home页面； 3. 在PlatformIO Home页面中，点击“New Project”创建一个新的项目； 4. 选择ESP32-C3 DevKitM-1作为目标设备板型； 5. 选择ESP-IDF框架作为开发框架； 6. 在PlatformIO Home页面中，点击“Open Project”打开项目； 7. 在VSCode中打开终端，使用ESP-IDF工具链编译和烧录固件； 8. 编写代码并进行调试。 注意：在进行上述步骤时，需要保证已经正确安装ESP-IDF工具链，并将其添加到系统环境变量中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值