woo-ui

    1.0.5 • Public • Published

    Woo UI logo

    Build Status Coverage Status Version Codacy License Visitor Badge

    Woo-UI

    我自己的 UI 组件库

    简介

    这是我在学习 Vue.js 过程中基于 Vue 2.6 开发的一套 UI 组件库,包含了一些自己常用的组件,PC 端和移动端都可以使用。

    使用 Travis CI 持续集成,使用 Mocha + Chai + Karma 编写并完成单元测试,测试覆盖率达到 85% 以上。

    官方文档点 这里 预览。

    其中部分组件的样式结构与 API 的设计借鉴了一些我使用过的成熟 UI 框架,例如 ElementAnt Design Vue

    注意:玩具项目,请不要在生产环境中使用

    开发指南

    1. 添加 CSS 样式

      使用之前,请务必确保你的浏览器支持标准盒模型,即 border-box

      IE8+ 浏览器支持

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
    2. 安装

      推荐使用 npm 安装

      npm install --save woo-ui
    3. 引入 woo-ui

      在 main.js 中写入以下内容,将组件注册为全局组件

      import Vue from "vue";
      import { WooButton, WooIcon } from "woo-ui";
      import { Plugin } from "woo-ui";
      import "woo-ui/dist/woo.css";
       
      Vue.use(Plugin);
       
      Vue.component("WooButton", WooButton);
      Vue.component("WooInput", WooInput);

      或者在 Vue 单文件组件的 script 标签内写入以下内容

      export default {
        name: "App",
        components: {
          WooButton,
          WooIcon,
        },
      };

    已有组件

    • 按钮 Button
    • 图标 Icon
    • 输入框 Input
    • 栅格系统 Grid
    • 布局 Layout
    • 短提示 Toast
    • 气泡提示框 Popover
    • 标签页 Tabs
    • 折叠面板 Collapse
    • 级联选择器 Cascader
    • 轮播图 Slide
    • 菜单 Menu

    TODO

    • 表单验证
    • 分页器
    • 表格
    • 图片上传
    • Sticky 组件

    开源许可

    MIT License.

    Copyright © 2020-present, Lil-C0der

    Install

    npm i woo-ui

    DownloadsWeekly Downloads

    1

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    1.72 MB

    Total Files

    77

    Last publish

    Collaborators

    • lil-c0der