最近 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 https://github.com/evenyao/GearCase 是一套简洁的 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 中的组件了.
效果
下图的效果为本组件库默认样式, 可以自行添加样式进行覆盖
组件的使用
关于各类组件的详细使用方法请参考官方文档 http://gearcase-ui.cn/ .
来源: https://www.cnblogs.com/evenyao/p/10077209.html