GearCase UI – 自己构建一套基于 Vue 的简易开源组件库

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

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

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 中的组件了。 

 

效果

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

组件的使用

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