一、概述

頁面是不同的構(gòu)件基于一定的業(yè)務(wù)邏輯和交互形成的。構(gòu)件作為頁面中最基礎(chǔ)的元素，分為原子構(gòu)件、通用構(gòu)件、業(yè)務(wù)構(gòu)件、模板（可復(fù)用的具有一定業(yè)務(wù)邏輯的多個(gè)構(gòu)件封裝而成）等。

二、構(gòu)件的添加

構(gòu)件的添加要基于路由，即構(gòu)件的添加的前提是要有一個(gè)路由頁面，此處省略添加路由的介紹，具體可參考路由創(chuàng)建。

1.從組件庫添加構(gòu)件

組件庫中涵蓋了平臺中擁有的所有構(gòu)件，通過對組件庫中的構(gòu)件進(jìn)行模糊搜索，可以查找匹配的構(gòu)件;找到構(gòu)件后，可以通過鼠標(biāo)拖拽構(gòu)件的方式，將構(gòu)件拖拽到屏幕中間的iframe預(yù)覽區(qū)域，iframe預(yù)覽區(qū)域可以快速接收構(gòu)件信息并渲染效果。

ps: 拖拽構(gòu)件至iframe預(yù)覽區(qū)域，需保持檢查開關(guān)為開啟狀態(tài)。

2.從構(gòu)件樹添加構(gòu)件

從構(gòu)件樹添加構(gòu)件只能通過構(gòu)件Id進(jìn)行模糊搜索，因此更適合對構(gòu)件id熟悉的用戶。從構(gòu)件樹添加構(gòu)件也更適用于不適合拖拽構(gòu)件的場景，比如要拖拽至某些復(fù)雜的場景中，不便于尋找構(gòu)件擺放位置;或者是添加某些在組件庫中沒有的原子構(gòu)件，如div、a標(biāo)簽等。

添加通用構(gòu)件:

ps: 父構(gòu)件的插槽位有哪些，可以點(diǎn)擊父構(gòu)件的說明文檔進(jìn)行查閱，不同的構(gòu)件插槽位名稱不同，位置不同;非容器類構(gòu)件沒有插槽位。

添加原子構(gòu)件:

原子構(gòu)件即原生的HTML元素，如div、a、span等。

至此，構(gòu)件的添加完成啦。

（推廣）