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

在審

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

1.一種基于vue的UI庫組件效果實時顯示方法，其特征在于，包括：

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

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

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

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

2.根據權利要求1所述的一種基于vue的UI庫組件效果實時顯示方法，其特征在于，在“通過所述UI組件標簽將template、script、style三個部分的代碼字符串與對應的UI組件庫建立連接”步驟中，對所述UI組件標簽進行庫名匹配到對應的UI組件庫，并返回所述UI組件庫所在的UI組件庫地址，再將所述UI組件庫地址包裝成請求鏈接插入到網頁中以完成連接，所述UI組件標簽包含UI組件庫名稱。

3.根據權利要求2所述的一種基于vue的UI庫組件效果實時顯示方法，其特征在于，在“將所述UI組件庫地址包裝成請求鏈接插入到網頁中以完成連接”步驟中，將所述UI組件庫地址進行拼接，得到可發起瀏覽器資源加載請求的請求鏈接，將所述請求鏈接以腳本的形式插入到網頁文檔的頁眉標簽中，并將所述UI組件標簽對應的UI組件的樣式文件引入到所述網頁文檔中。

4.根據權利要求1所述的一種基于vue的UI庫組件效果實時顯示方法，其特征在于，在“使用字符串代碼解析工具將所述代碼拆分為template、script、style三個部分的代碼字符串”步驟中，所述style部分代碼包含style標簽內容，所述script部分代碼中包含相關事件代碼，所述template部分代碼中包含樣式代碼與UI組件標簽字符串。

5.根據權利要求1所述的一種基于vue的UI庫組件效果實時顯示方法，其特征在于，所述模板解析方法接收template部分代碼作為參數，返回帶有render函數的函數文本，所述腳本解析方法接收script部分代碼，返回帶有script函數的函數文本，所述樣式解析方法接收style部分代碼，返回包含UI組件樣式的字符串。

6.根據權利要求1所述的一種基于vue的UI庫組件效果實時顯示方法，其特征在于，所述createAPP方法接收所述模板解析代碼、腳本解析代碼、樣式解析代碼，并將所述模板解析代碼和所述腳本解析代碼轉換為可執行的JavaScript代碼，將所述模板解析代碼、腳本解析代碼、樣式解析代碼傳遞給createAPP方法，所述createAPP方法將所述模板解析代碼、腳本解析代碼、樣式解析代碼進行合并得到掛載顯示代碼，并將頁面id作為參數傳入到所述掛載顯示代碼的mount函數中，對所述掛載顯示代碼中mount函數進行調用，根據所述mount函數中的頁面id將頁面效果顯示在對應的網頁上。

7.一種基于vue的UI庫組件效果實時顯示工具，包括代碼編輯器、效果展示框，用戶在所述代碼編輯器中輸入代碼，輸入代碼使用權利要求1-6所述的方法進行處理后，將代碼效果在所述效果展示框中進行實時展示。