共用 UI 元件：複製 VS 安裝

近年來，開發人員處理 UI 庫的方式發生了明顯的轉變，不再透過 npm 套件安裝整個元件庫，而是直接將程式碼複製並貼上到他們的程式碼庫中。

Shadcn/UI 大大普及了這一趨勢，該程式庫為開發人員提供現成的可自訂元件，這些元件可以直接複製到專案中以實現最大的靈活性。

為什麼複製對於複雜組件更勝一籌

複製貼上方法很出色，特別是對於複雜的 UI 元素，例如身份驗證頁面、詳細的儀表板或複雜的資料視覺化。這些組件需要微調定制，而這很難透過不可變的 npm 套件來實現。

這種方法不會讓庫的API 被無盡的配置選項淹沒，而是允許開發人員利用現代前端框架的可組合性和聲明性性質，從而更好地控制組件的每個部分。

您可以直接將樣式套用到元件中的元素，而不是冗長而複雜的 CSS 選擇器。您無需使用複雜的依賴注入邏輯來注入元件，只需按照您的選擇放置或重新排列元件即可。

Bit 平台上的互動式 shadcnui 圖表

隨著人工智慧編碼助理的引入，這種方法變得更加重要。您可以從接近您需要的預建組合開始，而不是透過人工智慧透過冗長、複雜的提示從頭開始產生元件，或與助手進行長時間的對話。

透過將程式碼嵌入到您的專案中，您可以為人工智慧助理提供特定的、有形的上下文。從那裡，您可以要求它進行增量調整，例如調整樣式、添加輔助功能或更改佈局。

位元元件：可以直接編輯的套件

Bit 向 Web 開發世界引入了一個新實體：Bit 元件。簡而言之，Bit 元件可以被認為是一個超級套件。您可以共用它、安裝它、複製它，甚至可以獨立於任何特定的專案設定進行協作。

為了簡單起見，我們可以將 UI 元件分為兩組：設計系統元件和區塊元件。在設計系統中，像 Card 這樣的基本組件是基本構建塊。同時，區塊組件（例如 MediaCard）由設計系統元素組成，但提供更高級的功能。

選擇 1：使用設計系統組件進行組合

建立新元件時，第一個選項是根據您的設計系統進行組合。例如，要建立自訂卡片，您可能需要組合卡片、按鈕和版面等元件。

Bit 平台上共享的基於 MUI 的元件

這些元件可以透過 npm、pnpm、yarn 或 Bit 的安裝方式安裝在您的專案中：

npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography

選擇 2：使用區塊組件

選擇預先建置的區塊元件時，除了簡單安裝之外，您還有多種靈活的選擇。

最簡單的方法是直接安裝組件包並使用其API。如果該元件開箱即用地滿足您的需求或只需要進行細微的調整，那麼這種方法效果很好。

對於需要進行大量變更的場景，Bit 的 fork 指令可讓您將元件的完整程式碼複製到您的專案中。這包括原始檔案、依賴項和配置（包括元件的開發工具）。

https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card

例如，要複製 MediaCard 元件及其配置，我們將執行 bit fork 並將其元件 ID（而不是套件名稱）作為參數傳遞：

bit fork learnbit-react.material-ui-blocks/content/media-card

值得注意的是，Bit 還提供了 bit import 命令，它允許您對元件進行更改並發布新版本。此選項要求您具有修改元件的適當權限（與 bit fork 指令不同，它不會影響原始元件）。

彈出依賴項的來源文件

當衍生具有相依性的元件時，Bit 會自動安裝它們以方便使用。但是，如果您需要直接存取依賴項的原始程式碼，您也可以分叉這些依賴項。

例如，如果您想複製 Button 元件，您也可以從 Bit 平台上您團隊的集合中 fork 它：

bit fork bitdesign.material-ui/inputs/button

以上是共用 UI 元件：複製 VS 安裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！