一、概述
頁面是不同的構(gòu)件基于一定的業(yè)務(wù)邏輯和交互形成的。構(gòu)件作為頁面中最基礎(chǔ)的元素，分為原子構(gòu)件、通用構(gòu)件、業(yè)務(wù)構(gòu)件、模板（可復(fù)用的具有一定業(yè)務(wù)邏輯的多個構(gòu)件封裝而成）等。
二、構(gòu)件的添加
構(gòu)件的添加要基于路由，即構(gòu)件的添加的前提是要有一個路由頁面，此處省略添加路由的介紹，具體可參考路由創(chuàng)建。
1.從組件庫添加構(gòu)件
組件庫中涵蓋了平臺中擁有的所有構(gòu)件，通過對組件庫中的構(gòu)件進行模糊搜索，可以查找匹配的構(gòu)件；找到構(gòu)件后，可以通過鼠標拖拽構(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進行模糊搜索，因此更適合對構(gòu)件id熟悉的用戶。從構(gòu)件樹添加構(gòu)件也更適用于不適合拖拽構(gòu)件的場景，比如要拖拽至某些復(fù)雜的場景中，不便于尋找構(gòu)件擺放位置；或者是添加某些在組件庫中沒有的原子構(gòu)件，如div、a標簽等。
添加通用構(gòu)件：
ps: 父構(gòu)件的插槽位有哪些，可以點擊父構(gòu)件的說明文檔進行查閱，不同的構(gòu)件插槽位名稱不同，位置不同；非容器類構(gòu)件沒有插槽位。
添加原子構(gòu)件：
原子構(gòu)件即原生的HTML元素，如div、a、span等。
至此，構(gòu)件的添加完成啦。
