你是否考慮過(guò)在 Vue.js 或其他框架中構(gòu)建組件庫(kù)，或者你需要它來(lái)構(gòu)建可重用的設(shè)計(jì)系統(tǒng)，以減少投入市場(chǎng)的時(shí)間并提供視覺(jué)一致性，或者你想為社區(qū)貢獻(xiàn)另一個(gè)組件庫(kù)。

你可能想立即投入進(jìn)去并開(kāi)始編碼，但是首先你必須退后一步，問(wèn)問(wèn)自己：“是什么構(gòu)成了一個(gè)好的組件庫(kù)？”

讓我們?cè)谶@篇文章中回答這個(gè)問(wèn)題，給你一個(gè)我們認(rèn)為是必要考慮的項(xiàng)目清單。

漂亮的組件

首先，美觀很重要。組件庫(kù)不僅應(yīng)該功能良好，而且看起來(lái)很有吸引力。在選擇采用自定義構(gòu)建之前，請(qǐng)仔細(xì)考慮您的視覺(jué)需求。各種現(xiàn)有框架中的任何一個(gè)都可能就足夠了。如果您熟悉 Tailwind CSS，請(qǐng)考慮圍繞這個(gè)流行的 CSS 實(shí)用程序框架構(gòu)建庫(kù)。

功能組件

Vue 將功能性和交互性完美融合，將 JavaScript 的強(qiáng)大功能發(fā)揮到了極致。確保組件按預(yù)期運(yùn)行是不容置疑的。它們必須兌現(xiàn)承諾，提供開(kāi)發(fā)人員所期望的必要功能。

直觀的設(shè)計(jì)

易用性是最重要的。設(shè)計(jì)直觀而靈活的組件需要注意細(xì)節(jié)——從一致和直觀的命名約定到優(yōu)先考慮開(kāi)發(fā)人員體驗(yàn)的周到設(shè)計(jì)方法。

跨瀏覽器和設(shè)備兼容性

確保你的組件庫(kù)在各種瀏覽器和設(shè)備上無(wú)縫運(yùn)行是至關(guān)重要的。這不僅包括基于屏幕大小的響應(yīng)式設(shè)計(jì)，還包括選擇的 JavaScript API 與目標(biāo)瀏覽器兼容。

易訪問(wèn)性(A11y)

無(wú)障礙性不僅僅是一個(gè)流行詞，它是一種必需品。你的庫(kù)應(yīng)該迎合各種各樣的用戶，包括那些有殘疾的人。將無(wú)障礙特性(如ARIA屬性)合并到你的組件中，不僅可以擴(kuò)大你的用戶群，而且可以與包容性設(shè)計(jì)的最佳實(shí)踐保持一致。

類型安全和自我文檔

在現(xiàn)代開(kāi)發(fā)環(huán)境中，類型安全至關(guān)重要。使用 TypeScript 開(kāi)發(fā) Vue 組件庫(kù)提供了自文檔化特性，可以直接在 IDE 中為最終開(kāi)發(fā)人員提供幫助。這些幫助以有用的懸停提示、有針對(duì)性和專注的自動(dòng)補(bǔ)全和針對(duì)組件 API 的錯(cuò)誤檢測(cè)的形式出現(xiàn)。這對(duì)開(kāi)發(fā)人員的效率和滿意度有巨大的提升，并減少了他們必須在代碼和庫(kù)文檔之間來(lái)回跳轉(zhuǎn)的時(shí)間。

服務(wù)器端渲染(SSR)

支持客戶端和服務(wù)器端渲染的靈活性，特別是對(duì)于像 Nuxt 這樣的庫(kù)來(lái)說(shuō)，對(duì)于一個(gè)全面的 Vue UI 庫(kù)來(lái)說(shuō)是必不可少的。

測(cè)試覆蓋率

一個(gè)經(jīng)過(guò)良好測(cè)試的庫(kù)會(huì)給人帶來(lái)信心。它使庫(kù)維護(hù)者有信心定期添加新功能、更新依賴項(xiàng)，并修復(fù) bug，而不用擔(dān)心退化。它給庫(kù)用戶帶來(lái)信心，更新不會(huì)導(dǎo)致他們的應(yīng)用崩潰(或更糟糕，以一些微妙、難以檢測(cè)但業(yè)務(wù)基本的方式崩潰)。編寫良好的測(cè)試和良好的覆蓋率使庫(kù)充滿活力，不斷發(fā)展，可以跟上不斷變化的環(huán)境。考慮使用測(cè)試驅(qū)動(dòng)開(kāi)發(fā)(TDD)，使測(cè)試成為工作流中無(wú)需思考的一部分。

主題化系統(tǒng)

支持主題化允許自定義和個(gè)性化，這是調(diào)整庫(kù)以適應(yīng)不同項(xiàng)目的品牌和樣式要求(在合理范圍內(nèi))的關(guān)鍵。Vuetify 和 Prime Vue 等庫(kù)為實(shí)現(xiàn)有效的主題系統(tǒng)提供了靈感。

全面的文檔

好的文檔的重要性怎么強(qiáng)調(diào)都不為過(guò)。它通常是一個(gè)庫(kù)被采用和成功的決定性因素。太多的維護(hù)者認(rèn)為文檔是事后的想法。不要犯同樣的錯(cuò)誤，它值得同樣的關(guān)注。

可擴(kuò)展性和可維護(hù)性

一個(gè)好的組件庫(kù)不僅應(yīng)該滿足當(dāng)前的需求，還應(yīng)該為未來(lái)的擴(kuò)展做好準(zhǔn)備。一個(gè)干凈、組織良好的代碼庫(kù)有助于維護(hù)和引入新功能，確保庫(kù)仍然相關(guān)和有用。這與一個(gè)經(jīng)過(guò)良好測(cè)試的庫(kù)密切相關(guān)，但也意味著要考慮版本控制、可預(yù)測(cè)的發(fā)布周期等因素。

結(jié)論

雖然所涵蓋的方面是基礎(chǔ)的，但一個(gè)真正出色的庫(kù)通常包括額外的功能，如 Figma UI kits、完整的應(yīng)用程序和/或網(wǎng)站模板、helper composables、有用的指令和 i18n 支持等。

構(gòu)建一個(gè)組件庫(kù)無(wú)疑是一項(xiàng)重大的任務(wù)，但它也是一項(xiàng)值得挑戰(zhàn)的任務(wù)。沒(méi)有必要從一開(kāi)始就解決所有可能的需求。從小處開(kāi)始，根據(jù)現(xiàn)實(shí)世界的反饋反復(fù)改進(jìn)，這比一開(kāi)始就追求完美更有效。如果現(xiàn)有的庫(kù)不能滿足您的需求，創(chuàng)建一個(gè)定制的庫(kù)可能適合您。只要確保您考慮了這個(gè)清單上的項(xiàng)目，就可以構(gòu)建一些真正令人驚嘆的東西！

改編自：https://vueschool.io/articles/vuejs-tutorials/what-makes-a-good-vue-component-library-a-checklist/