SAP Fiori + Vue = ？

時間 2019-11-11

標籤 sap fiori vue 简体版

原文原文鏈接

2017年3月28日，我到國內一個SAP CRM客戶那裏，同他們的架構師關於二次開發的UI框架選擇SAP UI5仍是Vue進行了一番探討。回到SAP研究院以後，我把這個問題扔到了公司的微信羣裏，引發了你們的熱烈討論。css

由於出差回來以後，我須要向我老闆和老闆的老闆彙報工做，所以寫了這篇blog：html

https://blogs.sap.com/2017/03/31/is-jquery-based-ui-framework-obsolete/前端

時光飛逝，轉眼間2018年也快過完了。今天上午上班路上，突然看到陽哥在公司微信羣裏發了一個截圖，提供了一個指向公網github倉庫的連接：vue

https://github.com/SAP/fundamental-vuejquery

看到這個倉庫的url，Jerry立刻就想起了早些時候在experience.sap.com網站上看到的這條新聞：webpack

https://experience.sap.com/news/democratizing-sap-fiori-with-fiori-fundamentals/git

咱們都知道Fiori表明SAP新一代UI的界面風格，而UI5是Fiori UX(User Experience，用戶體驗)的具體實現技術。SAP決定將Fiori同具體UI實現技術解耦, 是出於什麼考慮呢？github

衆所周知，前端技術發展的速度是很是快的，新理念，新名詞，新工具層出不窮，不少前端開發程序猿常常哀嘆"學不過來了"，那麼，若是隻綁定於某一種具體的UI實現技術，Fiori UX會缺少足夠的靈活性，很難充分利用業界最新技術來更好地爲終端用戶服務。web

同時，這一舉動也充分體現了SAP確實在傾聽本身生態圈裏開發人員的呼聲，經過這種解耦容許SAP開發人員根據實際項目須要，靈活選擇最佳UI框架來開發Fiori應用。npm

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上的文檔描述一致。