前言：隨著前端模組化、元件化的概念深入，很多團隊都開始開發自己的UI元件庫，但是在開發和使用過程中難免會出現各種各樣的問題，比如文件缺失，建立元件需要各種手工操作，寫個元件例子還得去實際應用模組裡去檢查元件是否Ok等等，於是我們團隊結合自己專案的應用提取了一個UI元件化工程的腳手架，可以非常方便的生成一個UI元件庫的工程，很多之前需要手工處理的問題都交給腳手架自動完成。
UI元件庫目錄結構
我們暫時給提取出來的腳手架取名叫vde-cli，通過vde-cli腳手架生成的元件庫工程目錄結構如下：
核心功能
元件庫
工程的packages資料夾就是用來存放元件庫裡面的各種元件了，這裡不需要通過手動建立檔案的方式建立元件，直接通過一條建立元件的命令完成。每個元件都有一個單獨的元件資料夾，元件資料夾下都至少包含"index.vue"，"example.vue"，"readme.md"這三個檔案，這幾個檔案都是通過建立元件傳遞的引數加指定的模板生成，建立元件的命令如下：
npm run generate <componentName> <componentTitle>
複製程式碼兩個引數分別是元件的名稱和後面用來在文件和例子工程裡顯示的導航名稱。
元件庫的對外主檔案是工程的src/index.js，只要是通過上面的命令建立的元件，這個檔案都會自動更新（省去你手工更新的時間）
Doc文件工程
Doc文件工程就是用來展示你元件文件的一個小型單頁面系統。元件的文件就是存放在每個元件資料夾下的readme.md檔案，我們通過vue-markdown-loader去解析這個檔案變成一個vue元件也頁面中顯示。在你通過上面指令建立元件的時候，會自動更新Doc文件工程的所有依賴元件的部分（不需要任何手工操作）
Example例子工程
Example例子工程跟Doc文件工程類似，用來展示你元件的例子的小型單頁面系統，元件的例子就是存放在每個元件資料夾下面的example.vue檔案。在通過指令建立元件的完畢，就可以在該檔案裡測試你寫的元件了。
上面的文件工程和例子工程分別通過webpack-dev-sever起了一個對應的服務，新增元件和修改元件檔案下的檔案資訊都會自動重新整理這兩個應用。
用一張圖來表示整個大工程的流程圖如下：
主要實現方式
上面已經介紹了整個大工程其實是由元件庫、文件工程和例子工程組成的，當然最核心的東西還是元件了，所以一切還需要從建立元件開始說起：
所有的元件都存放在大工程的packages裡面，也就是說packages是所有元件存放的根目錄（跟元件配置資訊相關）。 首先需要說明的是，每個元件資料夾都至少包含元件主檔案（index.vue）、元件例子檔案（example.vue）、元件文件檔案（readme.md)這三個檔案。每個元件所包含的這三個檔案又是分別通過一個對應的模板檔案生成，這三個模板格式可以根據自己的需求自定義，大致類似於：
通過建立元件的命令傳遞兩個引數，一個代表元件的名稱（建立元件的資料夾名稱），另外一個是元件的標題（用於文件工程和例子工程的導航名稱顯示）。有了這兩個引數，我們就可以結合元件的模板檔案生成對應的元件，然後將這些元件資訊寫入gen/route.json裡面，因為文件工程和例子工程都非常依賴這些資訊。 元件建立完畢有一個很重要的工作就是自動往文件工程裡面註冊新的元件資訊（docs/main.js）和更新元件庫的對外主檔案(src/index.js)，這兩個檔案也分別是通過模板生成的，模板格式分別如下：
使用
只需要四條命令就能開啟一個自動化元件工程了：
1、全域性安裝vde-cli模組
npm install -g vde-cli
複製程式碼2、初始化工程
$ vde init <project-name>
複製程式碼3、安裝所需要模組
$ npm install
複製程式碼4、啟動專案
$ npm run start
複製程式碼然後整個工程就能執行起來了，應用的時候可以根據實際需求修改元件相關的模板和加入自己的元件庫的其它配置資訊就可以了。文件工程和例子工程的路由等資訊都會在通過建立元件命令的時候自動更新，你在更改元件的文件和元件功能的時候，文件工程和例子工程都會實時更新。
實際專案接入
這裡推薦使用npm link的方式，在專案裡npm link本地用vde init的那個工程即可。
總結
通過這套工程可以提供：
- 方便使用者檢視元件詳細文件
- 打包輸出一套UI庫元件的文件
- 方便開發者開發和查閱元件例子
- 自動完成建立元件的過程
- 提供一整套的元件化工程方案
目前這個vue-cli腳手架是從內部專案抽離出來，也是為了能夠給其它專案使用，個性化方便還是需要使用者自己新增。
工程倉庫地址：