GearCase - 自制 Vuejs 开源 UI 框架

最近 1 ~ 2 月除了开发小程序之外，还一直在继续深入的学习 Vuejs。利用零碎、闲暇的时间整合了一套基于 Vue 的 UI 组件库。命名为 GearCase UI，意为齿轮盒。现在把该项目进行开源分享，希望能和更多的人一起交流学习。

在构建该项目的过程中我也收获颇丰。除单纯的造轮子之外，还学习了单元测试、持续集成，更加熟悉工程化。并了解 TDD、BDD等。

GearCase UI 组件库 0.2.14 版本已经完成，本篇文章简要讲解安装、引入、注册使用 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 进行安装。

安装完所有依赖之后开始引入。

引入和注册

如下图所示，在需要使用 GearCase 组件的子组件 Vue 单文件中通过 import { ... } from 'gear-case' 方式引入组件，通过 import 'gear-case/dist/index.css' 方式引入样式，（这一步可以在 main.js 文件中引入 ）。两者缺一不可。

如下图所示，然后在类似于 Vue 中注册单文件组件的方式进行组件的注册。

之后就可以在对应 Vue 文件中的 template 模板中使用 GearCase 中的组件了。

效果

下图的效果为本组件库默认样式，可以自行添加样式进行覆盖

组件的使用

关于各类组件的详细使用方法请参考官方文档。