美文网首页程序员让前端飞Vuejs
GearCase UI - 自己构建一套基于 Vue 的简易开源

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

作者: passMaker | 来源:发表于2018-12-06 15:20 被阅读32次

    最近 1 ~ 2 月除了开发小程序之外,还一直在继续深入的学习 Vuejs。利用零碎、闲暇的时间整合了一套基于 VueUI 组件库。命名为 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 中的组件了。

    效果

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

    组件的使用

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

    相关文章

      网友评论

        本文标题:GearCase UI - 自己构建一套基于 Vue 的简易开源

        本文链接:https://www.haomeiwen.com/subject/judwcqtx.html