前端組件化是當今熱議的話題之一，也是我們在開發單頁應用經常會碰到的一個問題，現在我們有了功能非常完善的Element-UI。

　　各個大廠也相繼宣布開源XXX-UI。

　　但是也會存在一些問題，比如每個公司可能需要的業務組件不盡相同，或者我們想自己開發一套屬于自己的組件庫，來增強對組件的可控性。那么我們該如何去做呢?

　　今天，就帶大家簡單來學一下：如何從零開始搭建Vue組件庫 VV-UI?

　　1. 環境準備

　　我們搭建組件庫，需要準備一系列環境，首先我們要考慮一下問題：

　　·

　　腳手架如何搭建

　　如何規劃目錄結構

　　如何編寫文檔

　　首先，對于腳手架環境的問題，目前已經有非常成熟的vue官方的腳手架，我們拿來用就好了

　　接著我們看第二個問題，如何規劃好我們組建的目錄結構?

　　首先我們需要有一個目錄存放組件，有一個目錄存放示例。所以我們要對vue-cli 生成的項目結構做一下改造：

　　這樣的話，我們需要再把我們webpack配置文件稍作一下調整，首先是把原先的編譯指向src的目錄改成examples，其次為了 npm run build 能正常編譯 packages 我們也需要為 babel-loader 再增加一個編譯目錄：

　　這樣我們搭建起來一個簡易的目錄結構。

　　緊接著我們需要考慮如何編寫文檔。對于文檔的編寫，自然是markdown最合適不過了，那么怎么讓我們在vue下可以去寫 markdown 文檔呢?答案當然是 vue-markdown-loader。

　　然后我們按照文檔配置了相關的插件信息：

　　好了，我們可以開始嘗試寫文檔了，在 example/docs 目錄下新建 test.md。

　　同時創建一個新的路由，指向我們的md文件：

　　別急，問題還在后面：我們期望的文檔不僅能編譯markdown，而且最好能識別demo代碼塊一方面做演示，一方面可以顯示演示代碼最好了，就像這樣：

　　那我們需要怎么做呢?vue-mark-down 功能肯定不止這些!于是我們繼續閱讀它的文檔，發現其實他就是封裝了 markdown-it，支持 options 選項。

　　這樣我們就可以為我們的markdown定義獨特的標識符，這里我用 demo 標識需要顯示代碼塊的地方，所以我需要配置options 選項 ：

　　這里簡單的描述一下這段代碼是干什么的：首先把內容里面vue片段編譯成html，用于顯示，另一方面用highlight來高亮代碼塊。demo-block本身是我們定義好的組件：

　　這樣，我們的 test.md 便可以這么去寫了：

　　2. 如何編寫組件

　　環境準備完畢，緊接著要開始編寫組件，考慮的是組件庫，所以我們竟可能讓我們的組件支持全局引入和按需引入，如果全局引入，那么所有的組件需要要注冊到Vue component 上，并導出：

　　接著要實現按需加載，我們只需要單個導出組件即可：

　　其次，我們還需要考慮一個問題：既然是單頁面應用，必然要去解決樣式沖突問題，如果組件內使用soped，那么樣式就無法從組件內抽離出來，達不到可定制化主題顏色的目的。

　　我們需要一套可以分離處理的樣式，可以自行編譯，可以相互不污染。這時候css 的BEM規范就顯得尤為重要。

　　說到這里，目前對BEM規范支持較好的插件就是postcss了，他允許我們配置BEM之間的連接符和縮寫：

　　這樣我們就可以把樣式單獨的抽離出來，通過gulp進行打包編譯：

　　最后生成我們的樣式代碼。

　　好了開始我們的測試：

　　優化與不足

　　組件導出代碼暫不支持自動化生成：比如我們的組件index文件，每次添加組件都需要不斷地改寫，可以嘗試進行webpack配置，npm run dev 的時候自動進行組件檢測，然后幫我們寫好導出代碼。

　　目錄結構劃分缺陷：目前所有內容僅支持中文，如果想要做到支持國際化，那么還需要重新調整目錄結構。

　　發布tag：需要編寫腳本支持tag發布

　　組件太少：文檔剛寫，組件還不是很多，慢慢去維護，相信會越來越多的組件，做業務的過程中也可以把常用的組件加進去，這樣更加方便自己以后的維護和學習

　　最后，如果你對于前端的很多相關知識點還是似懂非懂。

　　那么千鋒重慶HTML5的小編還是建議你去花錢參加個培訓班學，這樣可以用別人走過的路、花過的時間，幫助自己快速提升起來，花一點點錢就能學到別人好多年的經驗，何樂不為呢?

　　千鋒重慶HTML5技術注重將理論和實踐相結合，融合騰訊、阿里兩大互聯網巨頭前端技術精華。系統的囊括主流業務、應用終端等職場前沿技術。