2017年3月28日，我到國内一個SAP CRM客戶那裡，同他們的架構師關于二次開發的UI架構選擇SAP UI5還是Vue進行了一番探讨。回到SAP研究院之後，我把這個問題扔到了公司的微信群裡，引起了大家的熱烈讨論。
因為出差回來之後，我需要向我老闆和老闆的老闆彙報工作，是以寫了這篇blog：
https://blogs.sap.com/2017/03/31/is-jquery-based-ui-framework-obsolete/
時光飛逝，轉眼間2018年也快過完了。今天上午上班路上，忽然看到陽哥在公司微信群裡發了一個截圖，提供了一個指向公網github倉庫的連結：
https://github.com/SAP/fundamental-vue
看到這個倉庫的url，Jerry馬上就想起了早些時候在experience.sap.com網站上看到的這條新聞：
https://experience.sap.com/news/democratizing-sap-fiori-with-fiori-fundamentals/
我們都知道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/22/step-by-step-to-run-vue-application-in-bsp/
這個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/#/example/table
下圖是一個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風格的應用運作時效果，大家可以檢視這個視訊體驗：
或者檢視我托管到github上的demo：
http://i042416.github.io/FioriODataTestTool2014/WebContent/097_fiori_vue.html
手機上打開上面連結的效果：
由于時間關系，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的原創文章，請關注公衆号"汪子熙":
![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)