看了elementUI和bootstrapvue有的一個組件就有好幾個js文件，都看不懂。看別人的視頻教程封裝一個組件也沒寫那麼的東西一個文件就寫完了

最簡單的組件：會 CSS 就能封裝，比如布局組件

簡單交互的組件：會 DOM 事件就能封裝，比如 Button 組件

複雜交互的組件：還需要一點點封裝技巧，比如 Pager 組件、Datapicker 組件、Form 組件

代替 Native 級別的交互組件：需要你對交互有很多經驗，比如普通 Scroll 組件、普通 RickText 組件、普通 Table 組件

性能增強組件：需要你有專門的演算法，比如支持虛擬滾動的 Scroll 組件、兼容性強的 RickText 組件、功能強大的 Table 組件

大部分組件唯手熟爾，小部分組件需要專門的知識。

本人目前只停留在會用vue寫網頁。這是我的寫的網站，求各位大佬點贊。

dengguochao23：實戰 | 基於Vue.js+Element-ui 搭建的前端項目?

zhuanlan.zhihu.com圖標

封裝組件需要很多知識儲備，網上的視頻只是告訴你思路，做個簡單的demo！下面說一下需要哪些知識

  1. webpack要非常熟悉，可以根據不同環境搭建不同配置，比如開發環境，生產環境，測試環境！可以把不同模塊中的css提取壓縮到同一個文件中
  2. 自動化測試工具需要熟練掌握，如何使用快照測試，如何使用斷言測試，單元測試，代碼覆蓋率測試要怎麼寫
  3. Git操作，babel配置，npm發布都是基本操作
  4. 需要對vue框架非常了解，如狀態如何在組件之間相互傳遞，如何用插槽提高可定製性，了解事件系統是什麼樣的機制
  5. 需要有統一樣式的UI，還要計劃好組件有多少種狀態，每種狀態下的樣式
  6. 提高組件的實用性，易用性，定製性，也就是說用戶可以通過簡單修改屬性，讓組件顯示不同的樣式實現不同的功能，可以把小組件合併為大組件，提供的事件和綁定的方法要完善。並且這些操作要簡單不能太繁瑣
  7. 組件文檔要詳細到位，示例，效果，代碼，文字說明都要有
  8. 要有樣式模塊化思想
  9. 兼容性看你的定位了，是不是要打造支持所有瀏覽器的組件

目前只能想到這麼多了，如果想深入了解還是看看優秀組件庫的源碼，並且自己動手實現一個比較複雜的組件，並嘗試去理解他們的設計邏輯和出發點，為什麼這樣設計

你這裡指的組件是通用組件吧。首先通用組件和業務組件是有一定差的，通用組件考慮的要更多一些，用的地方比較多，不想業務組件，只在當前項目中的一處，或者幾處有用到。

寫通用組件需要多少功底，要具體看你封裝什麼類型的通用組件。如果是簡單的組件，比如 button、Tag 這些簡單的組件比較簡單，你會用 Vue.js ，CSS 功底還過得去基本就沒問題了。

不過即使是 button 這樣的簡單組件，如果想寫好，特別是代碼要優雅，也是要有一定的功底，比如 button 組件中有這麼一個需求：button 中可以有文字和 icon，有一個屬性（position=left/right）控制 icon 是在文字的左邊還是右邊。

您思考兩分鐘，您會這麼做？

可能大多數人的做飯都是根據 position 用 v-if 來判斷，其實更好的做法是用 CSS 來控制，給個提示用 flex 中的 order。

這不就要有比較紮實的 CSS 功底嗎~~

對於一些複雜的組件對 JS 的要求比較高了，比如 upload 組件。複雜的組件就涉及到組件的拆分、各個子組件之間如何交互，這裡面要求就比較高看，能夠體現出功底。

所以我建議你去看看 Element 和 IView 的組件庫源碼，看人家是怎麼封裝組件的。

做 element3 有段時間了

其中除了寫組件其實還涉及到很多點：

  1. pr 過來如何驗證是否有沒有問題
    1. 需要了解 github action
    2. 需要搞定 unit test
    3. 需要 lint
  2. 如果讓用戶可以在多個壞境下使用 element3
    1. 需要了解 rollup 或者 webpack
    2. 需要了解要支持的壞境，比如 cjs、esm、gloabl 等
  3. 如何規避 ref value 的心智負擔
    1. 需要配置 eslint
    2. 並且還需要深入了解 vue 的 eslint 配置
  4. 如何規範開發組件的流程
    1. 我們採用的是 TDD ，所以需要學習 TDD
  5. 如何避免任務衝突
    1. 需要了解任務分配等
  6. 如何管理一個遠程兼職的團隊成員
    1. 需要了解... 其實我也不了解（逃）
  7. 太多了。。。想起來在說

---

組件庫這個東西

寫組件是一個方面

前端工程化是另一個方面

除此之外還要加上團隊管理

最後不要臉的求個 star ：element3

簡單的組件封裝沒有那麼難，但要做高質量的組件還是很有難度的。也沒啥捷徑可言，就是多寫多練多實踐，從失敗中總結經驗，慢慢提高。可以從Switch、Radio簡單組件 -&> Form表單組件（如Button、Select）-&> Form、Table -&> 組合組件這個路線開始。還有一定要多用自己開發的組件，最好要給其他人使用，這樣才能發現問題，進行完善。

這個問題我也蠻好奇的

我認為其中有個重難點是如何寫好測試用例

關於組件的封裝，除非是功能性複雜，或者需要涉及到一些演算法的組件，大部分在GitHub都可以參考（照搬）邏輯，因為這部分有很多基礎通用的東西，然後再混入自己的想法

我就一寫代碼的，哪懂這個

這要看什麼基本都組件。

UI庫這一類的組件，需要嚴謹，和可擴展，可維護。

功能性也要好一些，所以寫起來考慮的事情就要多，代碼就多一些。

分成多個js文件，是為了便於維護。

如果是項目里的簡單的組件，要求就會低一些，實現的功能也相對弱一些，或者是針對UI庫的二次封裝。

所以看起來代碼會少，會簡單。

另外項目里的組件，改起來也方便，所以寫的時候也可以不用考慮太多。

最後，一些視頻，目的就是簡單的介紹一下vue的組件要怎麼寫，並不是介紹要如何寫一個UI庫。

推薦閱讀：
相关文章