最近 1 ~ 2 月除了開發小程式之外，還一直在繼續深入的學習 Vuejs。利用零碎、閒暇的時間整合了一套基於 Vue 的 UI 元件庫。命名為 GearCase UI，意為齒輪盒。現在把該專案進行開源分享，希望能和更多的人一起交流學習。
在構建該專案的過程中我也收穫頗豐。除單純的造輪子之外，還學習了單元測試、持續整合，更加熟悉工程化。並瞭解 TDD、BDD等。
GearCase UI 元件庫 0.1.2 版本已經完成，本篇文章簡要講解安裝、引入、註冊使用 GearCase 的方法。各元件的具體屬性和 api，您可以通過訪問官方文件進行查閱。如果喜歡該開源專案，請不要吝惜您的 ?star。
專案地址：https://github.com/evenyao/GearCase
官方文件：https://gearcase-ui.cn
簡介
GearCase UI 是一套簡潔的 Vue-UI 元件庫。
整合了基礎、表單、佈局、展示、通知等一系列常用元件，適合移動端和 PC 端使用。
操作流程
Vue-Cli
如果您要在 Vue-Cli 3.0 構建工具中使用 GearCase，例如使用 vue created hello-world 構建一個 demo。然後在裡面使用 GearCase。
安裝
cd 到專案目錄，使用 yarn add gear-case 安裝，也可以使用 NPM 進行安裝。
安裝完所有依賴之後開始引入。
引入和註冊
如下圖所示，在 App.vue 中通過 import { ... } from `gear-case` 方式引入元件，通過 import `gear-case/dist/index.css` 方式引入樣式。兩者缺一不可。
如下圖所示，然後在類似於 Vue 中註冊單檔案元件的方式進行元件的註冊。
之後就可以在對應 Vue 檔案中的 template 模板中使用 GearCase 中的元件了。
效果
下圖的效果為本元件庫預設樣式，可以自行新增樣式進行覆蓋
元件的使用
關於各類元件的詳細使用方法請參考官方文件。