SAPFiori+Vue=？

2017年3月28日，我到國(guó)內(nèi)一個(gè)SAP CRM客戶那里，同他們的架構(gòu)師關(guān)于二次開發(fā)的UI框架選擇SAP UI5還是Vue進(jìn)行了一番探討。回到SAP研究院之后，我把這個(gè)問題扔到了公司的微信群里，引起了大家的熱烈討論。

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出陵城免費(fèi)做網(wǎng)站回饋大家。

因?yàn)槌霾罨貋碇螅倚枰蛭依习搴屠习宓睦习鍏R報(bào)工作，因此寫了這篇blog：

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

時(shí)光飛逝，轉(zhuǎn)眼間2018年也快過完了。今天上午上班路上，忽然看到陽(yáng)哥在公司微信群里發(fā)了一個(gè)截圖，提供了一個(gè)指向公網(wǎng)github倉(cāng)庫(kù)的鏈接：

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

看到這個(gè)倉(cāng)庫(kù)的url，Jerry馬上就想起了早些時(shí)候在experience.sap.com網(wǎng)站上看到的這條新聞：

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

我們都知道Fiori代表SAP新一代UI的界面風(fēng)格，而UI5是Fiori UX(User Experience，用戶體驗(yàn))的具體實(shí)現(xiàn)技術(shù)。SAP決定將Fiori同具體UI實(shí)現(xiàn)技術(shù)解耦, 是出于什么考慮呢？

眾所周知，前端技術(shù)發(fā)展的速度是非常快的，新理念，新名詞，新工具層出不窮，很多前端開發(fā)程序猿經(jīng)常哀嘆" 學(xué)不過來了 "，那么，如果只綁定于某一種具體的UI實(shí)現(xiàn)技術(shù)，F(xiàn)iori UX會(huì)缺乏足夠的靈活性，很難充分利用業(yè)界最新技術(shù)來更好地為終端用戶服務(wù)。

同時(shí)，這一舉動(dòng)也充分體現(xiàn)了SAP確實(shí)在傾聽自己生態(tài)圈里開發(fā)人員的呼聲，通過這種解耦允許SAP開發(fā)人員根據(jù)實(shí)際項(xiàng)目需要，靈活選擇最佳UI框架來開發(fā)Fiori應(yīng)用。

Fiori UX同底層UI實(shí)現(xiàn)框架解耦的關(guān)鍵就在于 SAP Fiori Fundamentals , 一個(gè)輕量級(jí)的展現(xiàn)層實(shí)現(xiàn)。從技術(shù)層面上說，SAP Fiori Fundamentals不是一種新的UI技術(shù)或者框架，而是一系列stylesheets和HTML標(biāo)簽的集合，以此來讓SAP生態(tài)圈里的UI開發(fā)人員用其喜歡的UI框架，比如Angular，React，Vue等進(jìn)行開發(fā)，同時(shí)自動(dòng)保證開發(fā)出的應(yīng)用仍具有Fiori的風(fēng)格和用戶體驗(yàn)。

SAP Fiori Fundamentals的出現(xiàn)，絕不意味著它會(huì)替代UI5，實(shí)際上，SAP對(duì)于UI5的維護(hù)和功能增強(qiáng)一直沒有停步。

按照J(rèn)erry文章的風(fēng)格，當(dāng)然是到上代碼的時(shí)候了。

因?yàn)镴erry所在的團(tuán)隊(duì)進(jìn)行原型開發(fā)，組內(nèi)同事大多喜歡用Vue，所以我們就來試試SAP Fiori Fundamentals + Vue這對(duì)組合。

首先我們得有一個(gè)能工作的Vue應(yīng)用，然后在此基礎(chǔ)上加工。

您可以在我的SAP博客上找到一個(gè)Hello World的Vue應(yīng)用，通過webpack打包之后運(yùn)行，能在瀏覽器里看到顯示的Hello World：

https://blogs.sap.com/2017/12/22/step-by-step-to-run-vue-application-in-bsp/

這個(gè)Hello world的Vue應(yīng)用，項(xiàng)目結(jié)構(gòu)如下：

下面我們?cè)谄浠A(chǔ)上進(jìn)行加工。

1. 在項(xiàng)目文件夾下安裝 fundamental-vue 。這是為SAP Fiori Fundamentals實(shí)現(xiàn)的一個(gè)輕量級(jí)的Vue組件集合。

npm install --save fundamental-vue

安裝完畢后在package.json里能夠看到fundamental-vue還在beta版，

這一點(diǎn)和SAP在github上的文檔描述一致。

2. 下面這個(gè)鏈接羅列了SAP Fiori Fundamentals里支持的Vue組件，同時(shí)也介紹了如何自定義一個(gè)新的Vue組件。

https://dist-4d2gqwr8y.now.sh/#/example/table

下圖是一個(gè)Table組件的運(yùn)行時(shí)效果，大家不難發(fā)現(xiàn)這個(gè)Table的外觀和我們之前用UI5開發(fā)的很相似。

點(diǎn)擊Show Code，會(huì)顯示這個(gè)Table組件的Vue實(shí)現(xiàn)源代碼，類似我們UI5 Toolkit里顯示的控件在UI5 XML View里的源代碼，道理是相通的。

把這一大堆代碼粘貼到我們Vue應(yīng)用src文件夾下的index.vue里：

同樣在index.vue里，在module.exports里實(shí)現(xiàn)作為Button事件處理函數(shù)addCurrentEntry, 以及硬編碼一些測(cè)試數(shù)據(jù)：

在main.js里加入兩行:

import FundamentalVue from 'fundamental-vue';

Vue.use(FundamentalVue);

最后一步，在index.html里引入位于cdn上的Fiori Fundamentals的css文件。當(dāng)然github上也提到了也可以使用 npm install --save fiori-fundamentals 將其安裝到本地使用。

至此加工就結(jié)束了。用webpack打包之后，運(yùn)行npm run dev啟動(dòng)wepack-dev-server, 就可以在localhost里看到如下效果：

輸入新的謀士姓名，點(diǎn)擊Add Entry按鈕之后能將其輸入到表格中。

盡管網(wǎng)上有種說法，“ 郭嘉不死，臥龍不出 ”，然而孔明永遠(yuǎn)是Jerry心中的三國(guó)演義第一謀士。

這個(gè)使用Vue組件開發(fā)而成的具有Fiori UX風(fēng)格的應(yīng)用運(yùn)行時(shí)效果，大家可以查看這個(gè)視頻體驗(yàn)：

<iframe frameborder="0" width="677" height="380.8125" allow="autoplay; fullscreen" allowfullscreen="true" src="https://v.qq.com/txp/iframe/player.html?origin=https%3A%2F%2Fmp.weixin.qq.com&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/FioriODataTestTool2014/WebContent/097_fiori_vue.html

手機(jī)上打開上面鏈接的效果：

由于時(shí)間關(guān)系，Jerry還沒能深入了解SAP Fiori Fundamentals的更多技術(shù)細(xì)節(jié)，只是簡(jiǎn)單給大家展示了它和Vue協(xié)同工作的效果。

未來如果有機(jī)會(huì)，Jerry會(huì)給大家?guī)砀嗌钊雸?bào)道，感謝閱讀。

相關(guān)閱讀

• SAP Fiori應(yīng)用的三種部署方式

• Jerry的Fiori原創(chuàng)文章合集

• SAP成都C4C小李探花：淺談Fiori Design Guidelines

• Jerry和您聊聊Chrome開發(fā)者工具

• Jerry的UI5框架代碼自學(xué)教程

• Jerry的碎碎念：SAPUI5, Angular, React和Vue

• SAP Cloud for Customer 使用SAP UI5的獨(dú)特之處

• 當(dāng)我用UI5診斷工具時(shí)我用些什么

• 在Kubernetes上運(yùn)行SAP UI5應(yīng)用(上）

• 在Kubernetes上運(yùn)行SAP UI5應(yīng)用(下)

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":

網(wǎng)站名稱：SAPFiori+Vue=？
網(wǎng)址分享：http://muchs.cn/article2/pipdic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)