最近 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 中的組件了。
效果
下圖的效果為本組件庫默認樣式，可以自行添加樣式進行覆蓋
組件的使用
關於各類組件的詳細使用方法請參考官方文檔。