用vue-cli3從0打造一個完整的UI庫
本文旨在給大家提供一種構建一個完整UI庫腳手架的思路：包括如何快速並優雅地構建UI庫的主頁、如何託管主頁、如何編寫指令碼提升自己的開發效率、如何生成CHANGELOG等等，這裡提供了一個Demo可供大家參考：
初始化目錄結構
主流的開源UI庫程式碼結構主要分為三大部分：
- 元件庫本身的程式碼：這部分程式碼會發布到npm上
- 預覽示例和檢視文件的網站程式碼：類似Vant、ElementUI這類網站。
- 配置檔案和指令碼檔案：用於打包和釋出等等
我們先用vue-cli3初始化一個模板，然後在根目錄下新增三個資料夾，一個用來存放 元件 的程式碼（ packages ）,一個用來存放 預覽示例的網站 程式碼（ examples ）（這裡直接把初始化模板的 src 目錄更改為 examples 即可），一個用來存放 指令碼 程式碼（ build ）
檔案的名字可以根據自己喜好去命名。
完成一個元件
具體的程式碼組織方式可以檢視 Github上的原始碼 ，這裡需要注意，我們儘量以元件名來命名資料夾名，然後在資料夾內新建 index.vue 元件。這麼做是為了方便後面我們用程式碼直接生成 index.js 入口檔案的內容。
樣式檔案的分離
為了更好的處理樣式，我們把所有的樣式檔案單獨處理（ 程式碼地址 ），這裡主要用Gulp來處理任務。
釋出NPM包
打包
當我們完成了一個元件，就可以打包了，打包很簡單，這得益於vue-cli3的 build 命令引入了 構建目標 引數，只需執行
vue-cli-service build --target lib --name vue-cards --dest lib packages/index.js 複製程式碼
就可以把 packages 下所有的程式碼以 庫 模式打包出去。
在庫模式中，Vue 是外接的。這意味著包中不會有 Vue，即便你在程式碼中匯入了 Vue。如果這個庫會通過一個打包器使用，它將嘗試通過打包器以依賴的方式載入 Vue；否則就會回退到一個全域性的 Vue 變數。
釋出
釋出之前，我們需要新增一個 .npmignore 檔案，把一些不需要釋出到 npm 包的檔案或者資料夾都寫在裡面，寫法和 .gitignore 一致。 具體怎麼釋出一個 npm 包這裡就不在贅述了。
文件的編寫和釋出
編寫
可能大多數人覺得寫一個開源UI庫最頭疼的事情就是寫文件，如何快速又優雅的構建出像ElementUI官網這類網站呢？ 目前最流行的寫文件的方式就是通過 markdown 編寫，那我們要解決的就是如何將 Markdown文件HTML化 ，直接展示在頁面中。 這裡我們可以用 vue-markdown-loader 外掛，該外掛的具體配置可以檢視專案的 vue.config.js 檔案。 具體到本專案的效果如圖所示：
markdown 編寫的，其他部分則是普通的
vue
元件。
（ 本專案網站的具體的程式碼地址 ）
釋出
我們可以利用GithubPages功能來發布我們的文件網站，具體的使用方法網上有很多教程，比如 GitHub Pages 使用入門 。 其實還有一種很簡單的方式，可以用 gh-pages 這個工具，一鍵釋出到對應倉庫的 gh-pages 分支。具體配置和使用可以參考本專案的 build/publish-docs.js 檔案。
提高開發效率的一些做法
在本專案的 build 資料夾下，有很多能夠大大提升我們開發效率的檔案，下面來一一講解一下它們的用途。
get-components.js 檔案主要為了獲取 packages 目錄下所有的元件目錄，為我們構建 packages 下的入口檔案做準備。
build-entry.js 檔案主要是根據 get-components.js 的結果，然後將程式碼寫入 /packages/index.js ，生成入口檔案。
build-lib.js 檔案主要是做一些釋出npm包前的構建準備，包括構建入口檔案、構建庫、構建樣式檔案等。
publish-docs.js 檔案的作用是可以一鍵釋出文件到本倉庫的 gh-pages 分支。
release.sh 指令碼檔案主要是把一些釋出npm包的命令集合在了一起，包括很多git和npm操作。
快速生成CHANGELOG
CHANGELOG我們可以自己手寫MD文件，當然這並不明智。我們更希望的是用程式碼去自動化生成，原理無非就是提取你的git提交資訊並寫入檔案，這裡我們可以用 conventional-changelog 來生成CHANGELOG。為了生成更精細和正確的CHANGELOG文件，我們需要嚴格規範自己的提交記錄，我們可以用 conventional-changelog 的標準提交記錄： cz-conventional-changelog ，具體的用法可以參考 cz-cli 。本專案的 package.json 的 init 指令碼其實也封裝了相關的指令碼命令，可以參考。