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

這期內容當中小編將會給大家帶來有關Element一套優雅的Vue 2組件庫是如何開發的，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

初期也遇到一些棘手的問題，很慶幸都找到了解決方案。在這里整理一些解決方案分享給大家。

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

最初制定的目標是有一個主項目管理所有的組件弄成一個包，然后每一個組件都是單獨一個包。這樣用戶可以安裝所有組件也可以只安裝自己需要的組件。于是我們最直接的做法就是一個組件建一個項目，到后面組件越來越多管理起來也越加復雜，每一次升級主倉庫就要更新一堆依賴組件的版本號。而且開發起來也不方便。

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

所以我們重構了目錄結構，所有插件單獨一個項目放在 packages 目錄下，可單獨打包發布;同時最外面的 src  目錄下的入口文件引入所有組件，打包發布的主項目就是包含了所有的組件。從而就解決了多個子項目管理的問題。

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

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

組件庫一般都會自帶一套主題，也可能會有多套主題可供選擇，當然也要滿足用戶自定義的需求。所以 Vue 推薦的定義 scope  的樣式就不可行了，同時也不能把樣式寫在組件里。那么如何寫樣式同時單獨發布的組件如何引用樣式文件也是我們要解決的問題。

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

并且樣式文件目錄也作為單獨一個子項目發布，這樣引入整個包可以包含樣式文件，單獨安裝的組件可以通過安裝主題包的方式引入樣式文件。

這么做的好處是方便以后擴展其他主題，或者開發者可以自己定義一套其他 CSS 預處理的版本例如 Less 或 Scss。

文檔是如何工作的 -- 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 代碼的文檔網站。

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

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

有了這些工具，讓 Element 的開發工作變得更容易且更高效。

上述就是小編為大家分享的Element一套優雅的Vue 2組件庫是如何開發的了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。