前言

好久沒寫文章了。最近有朋友問我，為什麼之前的 mx-design 組件庫教程停更了？其實是因為我逐漸意識到，那種樣式內嵌的組件庫，無論在學習還是實際使用中，都有很大的侷限性。

做過稍微複雜定製需求的前端同學，應該都有類似的體會：

• 企業通常有自己獨特的 UI 規範，而傳統組件庫的樣式改造起來非常麻煩，有些深層樣式幾乎無法覆蓋。比如 disabled 狀態和 readOnly 狀態對應的樣式，往往與組件內部的 JavaScript 邏輯緊密耦合，難以徹底抽離。
• 有時我們甚至需要調整 DOM 結構或修改底層 JavaScript 行為，這在傳統組件庫中幾乎不可能實現。

面對這些問題，國外出現了一個備受矚目的前端組件庫項目——shadcn/ui，目前也是 GitHub 上最熱門的 UI 組件庫之一。

不過，shadcn/ui 並不完全適合國內的項目場景。簡單來説，它是一款 Headless 組件庫。你可以將 Headless 理解為不提供具體樣式的組件，它只包含最核心的 JavaScript 邏輯與基礎的 DOM 結構（甚至這部分也允許你自定義）。正因如此，用户獲得了高度的定製自由與可拓展性。

但缺點也有，，shadcn/ui 的功能相比 ant design、arco-design 等國內傳統組件庫來説，實在弱了不少。我們一個組件可能需要支持 50 個邏輯參數，而 shadcn/ui 可能只提供 10 個。剩下的複雜度，就全部交還給了開發者。

對於大多數前端開發者來説，要在此基礎上進行深度擴展，難度不小。這與國外許多項目交互複雜度不高的情況，是完全不同的。

所以我一直在想，如果國內 ant-design 這樣級別的項目改造為 headless 組件庫，那該多好啊。所以這就是我的新項目 t-ui 的來歷了。

造輪子並不是初心，而是有兩點非常具有現實意義的目的：

• 一方面如果你説有什麼項目能覆蓋幾乎日常前端遇到的所有技術，那莫非組件庫項目了，在技術提升的幫助上，毋庸置疑，難度和廣度都足夠。
• 另一方面，我想幫助很多面試者，因為我也當過很多年面試官，發現很多簡歷都大差不差，沒啥亮點，我希望幫助這部分人擁有一個亮點項目，在面試中給面試官深刻的印象，從而獲得職業晉升和待遇升級。

所以我並不是簡簡單單造輪子，更多的，這是一個組件庫教程！而且大家都知道，之前的 mx-design 屬於參考了很多主流的組件庫，開源的代碼，質量好不好大家都看在眼裏。我一直是拿其當做最好的組件庫教程的目標去做的，目前看來，也是如此。

帶着酷炫的動畫回來了！

以下是官網首頁動畫

這是 github 項目地址，歡迎點贊哦: t-ui

也歡迎交流動畫技術，後續會寫一些動畫方面的教程，關於 motion 和 gsap.

項目內容頁主要欄目

我們拿 button 組件教程為例，如下圖：

每個組件分為三個欄目

• 必讀指南：告訴一些相關組件技術難點的知識
• 如何自定義 xx 組件，分別會用 css 和 tailwindcss 在 headless 也就是無樣式組件的基礎上，再次封裝一個有樣式，也就是組件庫內容既有 headless 也有如何將 headless 組件包裝為傳統組件庫的教程。

• 完整案例，然後會有組件使用案例，其中比較好玩的是創意案例，在 button 組件的創意案例中，增加了一些點擊狀態，例如

  • 點擊有水波紋效果
  • 點擊粒子迸發效果
  • 點擊出現笑臉的效果，如下（這個藉助了一元三次方程的公式，有興趣的可以去看源碼）：

組件庫最近計劃

會將原本接近 30 個在 mx-design 中存在的組件逐步遷移到 t-ui 中，算是第一期完成。也歡迎同學諮詢和交流前端技術。（微信：a2298613245）

現在的前端技術社區

現在前端技術社區，高質量的技術文章相比以前大大減少了，而且很多賣課的內容，質量很低，在我的前端技術交流羣裏，也有很多同學抱怨過（好幾個朋友買過一些培訓機構的教程，其中也有不少粗製濫造的內容，但是價格極其貴）。所以現在的前端技術社區，完全變了，可能跟這個行業本身，經濟大環境息息相關。

所以這裏強烈建議大家好好把英語拾起來，國外是有很多高質量的教程的，我本身也在堅持提高英語的聽説能力，對這個深有體會。後續也會把一些國外的教程放到交流羣裏和網站上大家一起學習，建立一個高質量的技術分享的社區！