GearCase UI - 自己构建一套基于 Vue 的简易开源
最近 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
中的组件了。
效果
下图的效果为本组件库默认样式,可以自行添加样式进行覆盖
组件的使用
关于各类组件的详细使用方法请参考官方文档。