2017 年 3 月 28 日，我到国内一个 SAP CRM 客户那里，同他们的架构师关于二次开发的 UI 框架选择 SAP UI5 还是 Vue 进行了一番探讨。回到 SAP 研究院之后，我把这个问题扔到了公司的微信群里，引起了大家的热烈讨论。
因为出差回来之后，我需要向我老板和老板的老板汇报工作，因此写了这篇 blog：
https://blogs.sap.com/2017/03…
时光飞逝，转眼间 2018 年也快过完了。今天上午上班路上，忽然看到阳哥在公司微信群里发了一个截图，提供了一个指向公网 github 仓库的链接：
https://github.com/SAP/fundam…
看到这个仓库的 url，Jerry 马上就想起了早些时候在 experience.sap.com 网站上看到的这条新闻：
https://experience.sap.com/ne…
我们都知道 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 Fiori Fundamentals 的出现，绝不意味着它会替代 UI5，实际上，SAP 对于 UI5 的维护和功能增强一直没有停步。
按照 Jerry 文章的风格，当然是到上代码的时候了。
因为 Jerry 所在的团队进行原型开发，组内同事大多喜欢用 Vue，所以我们就来试试 SAP Fiori Fundamentals + Vue 这对组合。
首先我们得有一个能工作的 Vue 应用，然后在此基础上加工。
您可以在我的 SAP 博客上找到一个 Hello World 的 Vue 应用，通过 webpack 打包之后运行，能在浏览器里看到显示的 Hello World：
https://blogs.sap.com/2017/12…
这个 Hello world 的 Vue 应用，项目结构如下：
下面我们在其基础上进行加工。
1. 在项目文件夹下安装 fundamental-vue。这是为 SAP Fiori Fundamentals 实现的一个轻量级的 Vue 组件集合。
npm install –save fundamental-vue
安装完毕后在 package.json 里能够看到 fundamental-vue 还在 beta 版，
这一点和 SAP 在 github 上的文档描述一致。
2. 下面这个链接罗列了 SAP Fiori Fundamentals 里支持的 Vue 组件，同时也介绍了如何自定义一个新的 Vue 组件。
https://dist-4d2gqwr8y.now.sh…
下图是一个 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 按钮之后能将其输入到表格中。
尽管网上有种说法，“郭嘉不死，卧龙不出”，然而孔明永远是 Jerry 心中的三国演义第一谋士。
这个使用 Vue 组件开发而成的具有 Fiori UX 风格的应用运行时效果，大家可以查看这个视频体验：
<iframe frameborder=”0″ width=”677″ height=”380.8125″ allow=”autoplay; fullscreen” allowfullscreen=”true” src=”https://v.qq.com/txp/iframe/p…;amp;vid=q0814wlsmqn&autoplay=false&full=true&show1080p=false&isDebugIframe=false” style=”margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;”></iframe>
或者查看我托管到 github 上的 demo：
http://i042416.github.io/Fior…
手机上打开上面链接的效果：
由于时间关系，Jerry 还没能深入了解 SAP Fiori Fundamentals 的更多技术细节，只是简单给大家展示了它和 Vue 协同工作的效果。
未来如果有机会，Jerry 会给大家带来更多深入报道，感谢阅读。
相关阅读
SAP Fiori 应用的三种部署方式
Jerry 的 Fiori 原创文章合集
SAP 成都 C4C 小李探花：浅谈 Fiori Design Guidelines
Jerry 和您聊聊 Chrome 开发者工具
Jerry 的 UI5 框架代码自学教程
Jerry 的碎碎念：SAPUI5, Angular, React 和 Vue
SAP Cloud for Customer 使用 SAP UI5 的独特之处
当我用 UI5 诊断工具时我用些什么
在 Kubernetes 上运行 SAP UI5 应用 (上）
在 Kubernetes 上运行 SAP UI5 应用 (下)
要获取更多 Jerry 的原创文章，请关注公众号 ” 汪子熙 ”: