共计 2629 个字符，预计需要花费 7 分钟才能阅读完成。
咱们都晓得 Fiori 代表 SAP 新一代 UI 的界面风格，而 UI5 是 Fiori UX(User Experience，用户体验) 的具体实现技术。从下图这则新闻 可能看出，SAP 决定将 Fiori 同具体 UI 实现技术解耦, 是出于什么思考呢？
家喻户晓，前端技术倒退的速度是十分快的，新理念，新名词，新工具层出不穷，很多前端开发程序猿常常悲叹 ” 学不过去了 ”，那么，如果只绑定于某一种具体的 UI 实现技术，Fiori UX 会不足足够的灵活性，很难充分利用业界最新技术来更好地为终端用户服务。
同时，这一行动也充分体现了 SAP 的确在聆听本人生态圈里开发人员的呼声，通过这种解耦容许 SAP 开发人员依据理论我的项目须要，灵便抉择最佳 UI 框架来开发 Fiori 利用。
Fiori UX 同底层 UI 实现框架解耦的要害就在于 SAP Fiori Fundamentals, 一个轻量级的展示层实现。从技术层面上说，SAP Fiori Fundamentals 不是一种新的 UI 技术或者框架，而是一系列 stylesheets 和 HTML 标签的汇合，以此来让 SAP 生态圈里的 UI 开发人员用其喜爱的 UI 框架，比方 Angular，React，Vue 等进行开发，同时主动保障开发出的利用仍具备 Fiori 的格调和用户体验。
SAP Fundamentals 是一个应用 HTML 和 CSS 的轻量级表示层，借助 Fundamentals 的样式表和 HTML 标签库，开发人员能够在任何基于 Web 的技术中构建统一的 SAP 应用程序。
应用 SAP Fundamentals 可能给开发者和企业带来以下的收益：
- Fundamentals Library Styles 能够利用于任何 Web 框架和库（包含 Web Components）
- 反对最风行的前端开发框架，包含但不限于 Angular、React 和 Vue
- 企业级客户和合作伙伴轻松采纳
- 可能轻松实现 UI 协调和主题化——尤其实用于新收买的公司或遗留解决方案 (Legacy Solutions)
时至今日，Fiori Fundamentals 库已被广泛应用于 SAP 生态圈各个产品和业务线，例如 SAP Commerce Cloud、Kyma、Luigi、SAP C/4HANA cockpit、SAP Concur、SAP Customer Data Cloud（又名 Gigya）、SAP Service Cloud（又名 Coresystems）、SAP Fieldglass、SAP Ariba 和 SAPDataHub 等。
SAP Fiori Fundamentals 的呈现，绝不意味着它会代替 UI5，实际上，SAP 对于 UI5 的保护和性能加强始终没有停步。
Fiori Fundamentals 同 UI5 Web Components 的关系
UI5 Web 组件是一组基于 Web 规范的封装、可重用和轻量级的 UI Elements. 它们交融了 SAP Fiori 3 设计，容许开发人员创立与 SAP Fiori 设计指南统一的跨应用程序的统一用户体验，而与具体应用的前端开发框架无关。
UI5 Web Components 具备 OpenUI5/SAPUI5 框架中相熟的企业级个性，例如稳定性、国际化、可拜访性和主题反对，并在 UI 元素的应用和实现之间引入了清晰的界面。
UI5 产品线的 UI5 Web 组件区域外围我的项目是作为 OpenUI5/SAPUI5 框架向模块化和通用工具箱演进的重要一环而创立的，其目标是提供一组独自的模块，从而使得 Web 开发人员能够轻松地将其增加到开发我的项目中，以构建企业级 Web 应用程序。
Talk is cheap. Show me the code. 上面咱们通过一些具体的例子来加深对 SAP Fiori Fundamentals 的了解。
因为笔者工作所在的团队进行原型开发，组内共事大多喜爱用 Vue，所以咱们就来试试 SAP Fiori Fundamentals + Vue 这对组合。
首先咱们得有一个能工作的 Vue 利用，而后在此基础上加工。
读者能够在我的这篇 SAP 博客上找到一个 Hello World 的 Vue 利用，通过 webpack 打包之后运行，能在浏览器里看到显示的 Hello World：
这个 Hello world 的 Vue 利用，我的项目构造如下：
上面咱们在其根底上进行加工。
- 在我的项目文件夹下装置 fundamental-vue。这是为 SAP Fiori Fundamentals 实现的一个轻量级的 Vue 组件汇合。
npm install –save fundamental-vue
装置结束后在 package.json 里可能看到 fundamental-vue 还在 beta 版，
- 上面这个链接列举了 SAP Fiori Fundamentals 里反对的 Vue 组件，同时也介绍了如何自定义一个新的 Vue 组件。
下图是一个 Table 组件的运行时成果，大家不难发现这个 Table 的外观和咱们之前用 UI5 开发的很类似。
点击 Show Code，会显示这个 Table 组件的 Vue 实现源代码，相似咱们 UI5 Toolkit 里显示的控件在 UI5 XML View 里的源代码，情理是相通的。
把这一大堆代码粘贴到咱们 Vue 利用 src 文件夹下的 index.vue 里：
同样在 index.vue 里，在 module.exports 里实现作为 Button 事件处理函数 addCurrentEntry, 以及硬编码一些测试数据：
在 main.js 里退出两行:
import FundamentalVue from 'fundamental-vue';
Vue.use(FundamentalVue);
最初一步，在 index.html 里引入位于 CDN 上的 Fiori Fundamentals 的 css 文件。当然 github 上也提到了也能够应用 npm install --save fiori-fundamentals 将其装置到本地应用。
至此加工就完结了。用 webpack 打包之后，运行 npm run dev 启动 wepack-dev-server, 就能够在 localhost 里看到如下成果：
输出新的谋士姓名，点击 Add Entry 按钮之后能将其输出到表格中。
这个应用 Vue 组件开发而成的具备 Fiori UX 格调的利用运行时成果，在手机查看如下图所示：
总结
本文首先介绍了驱动 SAP Fiori UX 设计语言同 SAP UI5 实现框架解耦的市场起因，从而引出 Fiori Fundamental 的概念，接着抉择 Vue 这个前端框架，解说了如何应用 Fiori Fundamentals 加上 Vue 这对组合，实现一个简略的具备 Fiori UX 的前端利用。
