我们都知道Fiori代表了SAP新一代UI的界面风格，UI5是FioriUX（UserExperience，用户体验）的具体实现技术经验）。从下图的消息可以看出，SAP决定将Fiori与具体的UI实现技术进行解耦。这是什么原因呢？众所周知，前端技术的发展速度非常快，新思想、新名词、新工具层出不穷。很多前端开发程序员常常感叹“学不会”。技术方面，FioriUX将缺乏足够的灵活性，无法充分利用业界最新的技术更好地服务于终端用户。同时，此举也充分体现了SAP在自身生态系统中确实在倾听开发者的声音。通过这种解耦，SAP开发者可以根据实际项目需求，灵活选择最佳的UI框架来开发Fiori应用。将FioriUX与底层UI实现框架解耦的关键在于SAPFioriFundamentals，这是一个轻量级的表示层实现。从技术上讲，SAPFioriFundamentals并不是一种新的UI技术或框架，而是一套样式表和HTML标签的集合，让SAP生态中的UI开发者可以使用自己喜欢的UI框架，如Angular、React、Vue等进行开发，同时自动确保开发的应用程序仍然具有Fiori的风格和用户体验。SAPFundamentals是一个使用HTML和CSS的轻量级表示层，借助Fundamentals的样式表和HTML标记库，开发人员可以在任何基于Web的技术中构建一致的SAP应用程序。使用SAPFundamentals可以为开发人员和企业带来以下好处：Vue企业级易于客户和合作伙伴采用简单的UI协调和主题化——特别是对于新收购的公司或遗留解决方案（LegacySolutions）如今，FioriFundamentals库广泛用于SAP生态系统中的产品和业务，例如SAPCommerceCloud、Kyma、Luigi、SAPC/4HANAcockpit、SAPConcur、SAPCustomerDataCloud（又名Gigya）、SAPServiceCloud（又名Coresystems）、SAPFieldglass、SAPAriba、SAPDataHub等。SAPFioriFundamentals的出现由no意味着它将取代UI5。事实上，SAP并没有停止对UI5的维护和增强。FioriFundamentals与UI5WebComponents的关系UI5WebComponents是一组基于Web标准的封装的、可重用的、轻量级的UIElements。它们结合了SAPFiori3设计，并允许开发人员创建跨应用程序的一致用户体验，而不管所使用的特定前端开发框架如何。UI5WebComponents具有OpenUI5/SAPUI5框架中熟悉的企业级特性，例如稳定性、国际化、可访问性和主题支持，并在UI元素的使用和实现之间引入了清晰的接口。UI5产品线的UI5WebComponents区域核心项目是作为OpenUI5/SAPUI5框架向模块化和通用工具箱演进的重要组成部分而创建的，其目的是提供一组单独的模块以便Web开发人员可以轻松地将其添加到您的开发项目中以构建企业级Web应用程序。谈话很便宜。给我看代码。下面我们通过一些具体的例子来加深对SAPFioriFundamentals的理解。因为笔者所在的团队是做原型开发的，所以组内大部分同事都喜欢用Vue，所以我们来试试SAPFioriFundamentals+Vue的组合。首先，我们必须有一个可用的Vue应用程序，然后在其上构建。读者可以在我的SAP博客上找到一个HelloWorldVue应用，通过webpack打包后运行，在浏览器中看到显示的HelloWorld：这个HelloWorldVue应用的项目结构如下：basedonwhichcarriedprocessing出去。在项目文件夹下安装fundamental-vue。这是为SAPFioriFundamentals实施的Vue组件的轻量级集合。npminstall--savefundamental-vue安装完成后可以在package.json中看到fundamental-vue还是beta版本。以下链接列出了SAPFioriFundamentals中支持的Vue组件，同时也介绍了如何自定义一个新组件。Vue组件。下图是一个Table组件的运行时效果。不难发现，这个Table的外观和我们之前用UI5开发的那个非常相似。点击ShowCode会显示Table组件的Vue实现源码，类似于我们UI5Toolkit在UI5XMLView中显示的控件源码，道理是一样的。把这么多代码粘贴到我们Vue应用的src文件夹下的index.vue中：同样在index.vue中，实现addCurrentEntry作为module.exports中的Button事件处理函数，硬编码一些测试数据：在main中添加两行。js：从'fundamental-vue'导入FundamentalVue；Vue.use(FundamentalVue);最后一步是在index.html中导入位于CDN的FioriFundamentals的css文件。当然github上也提到了也可以使用npminstall--savefiori-fundamentals在本地安装。至此处理结束。使用webpack打包后，运行npmrundev启动wepack-dev-server，在localhost中可以看到如下效果：输入新辅导员的姓名，点击AddEntry按钮将其录入到表单中。这款使用Vue组件开发的FioriUX风格的应用在手机端的运行效果如下图所示：总结本文首先介绍了推动SAPFioriUX设计语言与SAPUI5实现框架解耦的市场原因，从而引出FioriFundamental的概念，然后选择Vue作为前端框架，并讲解如何使用FioriFundamentals和Vue的结合，用FioriUX实现一个简单的前端应用。
