[發明專利]一種基于vue的UI庫組件效果實時顯示方法、裝置及應用

在審

• 申請號: 202211329004.5
• 申請日: 2022-10-27
• 公開（公告）號: CN115543316A
• 公開（公告）日: 2022-12-30
• 發明（設計）人: 郁強;徐洪亮;黃紅葉;倪林杰;謝淼烽
• 申請（專利權）人: 城云科技（中國）有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/36;G06F8/34
• 代理公司: 杭州匯和信專利代理有限公司 33475
• 代理人: 陳江

本申請提出了一種基于vue的UI庫組件效果實時顯示方法、裝置及應用，包括以下步驟：獲取用戶的代碼輸入，使用字符串代碼解析工具對代碼輸入進行解析，并根據用戶的代碼輸入連接對應的UI組件庫，使用模板解析工具、腳本解析工具、樣式解析工具對用戶的代碼輸入進行解析，得到模板解析代碼、腳本解析代碼、樣式解析代碼；將所述模板解析代碼、腳本解析代碼、樣式解析代碼通過vue框架的createAPP方法進行合并，得到掛載顯示代碼，所述createAPP將所述掛載顯示代碼掛載到網頁上進行效果顯示。本方案可以根據輸入代碼查看UI組件的效果，并且在對代碼進行修改時可以將修改后的效果實時的顯示到頁面中。

技術領域

本申請涉及前端技術領域，特別是涉及一種基于vue的UI庫組件效果實時顯示方法、裝置及應用。

背景技術

隨著web前端開發領域中，vue框架的不斷升級和生態的不斷豐富，開發者對于基于vue的UI框架有了更多的選擇，但是因為不同UI框架的實現思路不一樣，導致框架內組件的使用方式也變得千差萬別，在沒有一份詳細的框架組件使用文檔的前提下，開發者不得不花更多時間和精力在熟悉組件以及如何使用組件上。開發者的關注點也無法集中在業務功能實現上，對開發效率有著極大的影響。

目前雖然對多種組件框架的使用上已有現成的技術解決方案，比如vue sfcplayground，該方案的實現方法是通過在web端獲取代碼編輯框內輸入vue代碼，并用代碼解析方法將代碼解析成可被瀏覽器解析的代碼，最后輸出到頁面上，從而實現了代碼的在線編輯和實時效果展示，但是，該方案的在線編輯器只能解析在線編輯時產生的組件代碼，無法解析UI組件庫的組件代碼，并且該方案的在線編輯器無法提供代碼高亮和錯誤提示效果，這使得開發者在使用編輯器時還得將注意力放在如何保證代碼正確上，大大降低了開發效率。

此外還有一種live server方法，該方法是通過websocker連接向瀏覽器發送刷新請求，使瀏覽器頁面刷新，從而達到UI組件更新的目的，也就是說，live server利用的是瀏覽器行為重新加載資源，并且這個資源只能是當前項目已經存在的，并不能動態的從外部組件庫中進行UI組件的加載。

綜上所述，現亟需一種代碼編輯器能夠提供代碼高亮和錯誤提示從而保證代碼輸入正確，能夠解析基于vue的UI組件庫代碼的方法，且通過解析輸入代碼實現組件代碼到組件效果的轉換，且方案本身應該具有跨平臺性。

發明內容

本申請實施例提供了一種基于vue的UI庫組件效果實時顯示方法、裝置及應用，可以根據輸入的UI組件代碼實時的將UI組件效果在頁面上進行展示。

第一方面，本申請實施例提供了一種基于vue的UI庫組件效果實時顯示方法，所述方法包括：

獲取用戶的代碼，使用字符串代碼解析工具將所述代碼拆分為template、script、style三個部分的代碼字符串；

使用UI組件標簽識別工具分別對template部分的代碼字符串進行識別，得到template部分的代碼字符串中包含的UI組件標簽，通過所述UI組件標簽與對應的UI組件庫建立連接；

使用模板解析工具對template部分的代碼字符串中綁定的樣式和事件進行解析，得到模板解析代碼；使用腳本解析工具提取script部分的代碼字符串中的相關UI組件庫字符串，得到腳本解析代碼；使用樣式解析工具對style部分的代碼字符串中的style標簽內容進行轉換，得到樣式解析代碼；

將所述模板解析代碼、所述腳本解析代碼、所述樣式解析代碼通過vue框架的createAPP方法進行合并得到掛載顯示代碼，通過所述createAPP將所述掛載顯示代碼掛載到網頁上，再根據所述掛載顯示代碼中的UI組件標簽調用對應UI組件庫中的UI組件，并將其在網頁上進行效果顯示。