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

最新推荐文章于 2025-08-18 20:17:18 发布

weixin_30690833

最新推荐文章于 2025-08-18 20:17:18 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui 测试 ViewUI

原文链接：http://www.cnblogs.com/evenyao/p/10077209.html

本文介绍了一款名为GearCaseUI的Vue UI组件库，它包含了一系列适用于移动和PC端的基础、表单、布局和展示组件。作者在开发过程中深入学习了单元测试、持续集成和工程化，并将项目开源，希望与更多开发者交流。文章提供了安装、引入和使用的步骤，并邀请读者访问官方文档获取更多信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

转载于:https://www.cnblogs.com/evenyao/p/10077209.html