Element 一套優雅的 Vue 2 組件庫是如何開發的

時間 2019-11-05

標籤 element 一套優雅 vue 組件如何開發简体版

原文原文鏈接

今年的 JSConf 大會上，受到 gridcontrol 做者現場開源項目的感染，咱們也在現場宣佈開源這套基於 Vue 2 開發的組件庫 —— Element。上場前五分鐘才建的空倉庫，到晚上咱們真正推代碼上去已經收（pian）到了 100 多 star，並且僅僅三天時間就得到了 1k star。這個項目其實早在 Vue 2 進入 beta 時就開始開發了，一直到八月底才接近尾聲。初期也遇到一些棘手的問題，很慶幸都找到了解決方案。在這裏整理一些解決方案分享給你們。css

如何管理多個獨立的組件項目 -- lerna

最初制定的目標是有一個主項目管理全部的組件弄成一個包，而後每個組件都是單獨一個包。這樣用戶能夠安裝全部組件也能夠只安裝本身須要的組件。因而咱們最直接的作法就是一個組件建一個項目，到後面組件愈來愈多管理起來也越加複雜，每一次升級主倉庫就要更新一堆依賴組件的版本號。並且開發起來也不方便。vue

後來看到 babel 的倉庫的目錄結構非常奇特。一個 packages 文件夾下有全部的 babel 官方插件，直到發現他們用了一個叫 lerna 的工具。可讓你在主項目下管理多個子項目，從而解決了多個包互相依賴，且發佈時須要手動維護多個包的問題。webpack

因此咱們重構了目錄結構，全部插件單獨一個項目放在 packages 目錄下，可單獨打包發佈；同時最外面的 src 目錄下的入口文件引入全部組件，打包發佈的主項目就是包含了全部的組件。從而就解決了多個子項目管理的問題。git

element/
  package.json
  packages/
    component-a/
      package.json
    component-b/
      package.json

如何解決定製多套主題的問題

組件庫通常都會自帶一套主題，也可能會有多套主題可供選擇，固然也要知足用戶自定義的需求。因此 Vue 推薦的定義 scope 的樣式就不可行了，同時也不能把樣式寫在組件裏。那麼如何寫樣式同時單獨發佈的組件如何引用樣式文件也是咱們要解決的問題。github

爲了方便用戶覆蓋樣式，咱們採用 BEM 風格來寫 CSS，這樣的好處是類名基本都是一級，少數纔會有嵌套狀況，這樣很容易的就能夠直接覆蓋掉原有樣式。咱們使用了自家開發的 postcss-salad PostCSS 插件來寫樣式。集成了多個實用的 PostCSS 插件同時也支持 BEM 風格。web

而且樣式文件目錄也做爲單獨一個子項目發佈，這樣引入整個包能夠包含樣式文件，單獨安裝的組件能夠經過安裝主題包的方式引入樣式文件。vue-router

這麼作的好處是方便之後擴展其餘主題，或者開發者能夠本身定義一套其餘 CSS 預處理的版本例如 Less 或 Scss。json

文檔是如何工做的 -- vue-markdown-loader

當初寫 Mint UI 時就遇到了要用 Vue 寫文檔的問題：如何才能在寫 Markdown 時也能寫 Vue 組件的 Demo。雖而後來並無在 Mint UI 的文檔裏寫 Demo。最開始在 Element 的內部版本里，找遍了各類 Vue 的 Markdown 相關插件，要麼是在 template 裏定義 Markdown 格式，要麼就是有一個 Markdown 的組件。都不能作到純粹的寫 Markdown 文件，而且還能寫 Demo。數組

後來想到或許能夠嘗試把 Markdown 文件轉成 Vue 組件。畢竟能夠在 Markdown 裏寫 HTML，那麼徹底能夠做爲 Vue 的模板。後來就有了 vue-markdown-loader，一個把 Markdown 轉成 Vue 組件的 webpack loader，搭配 vue-router 就能搭建一個能夠在 Markdown 裏寫 Vue 代碼的文檔網站。babel

如何同時打包多個組件 -- cooking

因爲前面的設定，最終須要每一個組件都單獨打包一份併發布。同時每個組件下面都會有一個對應的配置文件，傳統的用 webpack 打包雖然支持傳入數組，可是並不能傳入多個文件。可是咱們有 cooking，一個基於 webpack 可是配置更簡單同時使用上也更容易的工具。打包時只須要同時傳入多個配置文件，利用 webpack 接受數組配置項的特性，就能同時進行打包。

有了這些工具，讓 Element 的開發工做變得更容易且更高效。如今 Element 已經正式開源，而且咱們已經放出了文檔，同時還放出了設計資源，歡迎各位 Vue 開發者來嘗試，也歡迎來作貢獻。

相關項目連接: