zwh-ui0824 中文文档教程

发布于 2年前 浏览 18 项目主页 更新于 2年前

zswui

React UI组件库 代号:雪人

![](https://img.shields.io/npm/l/zswui) ![](https://img.shields.io/npm/v/zswui) ![](https://img.shields.io/npm/dm/zswui) ![](https://img.shields.io/github/issues/winyh/zswui) ![](https://img.shields.io/github/languages/code-size/winyh/zswui) ![](https://img.shields.io/github/stars/winyh/zswui) ![](https://img.shields.io/github/last-commit/winyh/zswui)

从零开始构建的 React UI 组件库.实现了组件开发测试预览,文档撰写,从零配置 webpack@5,打包发布到 npm 一系列功能,详细教程请查看 wiki

安装

npm install zswui

引入样式

import "zswui/lib/zswui.css"

打包发布

npm run lib

npm login

npm publish

引用示例

import React, { Component } from 'react';
import { Button } from "zswui";

class App extends Component {
  render(){
    return (
      <div className="main">
        <Button> Hi, Boy! </Button>
      </div>
    );
  }
}

export default App;

demo(文档待完善)

https://winyh.github.io/zswui

[ winyh ], [ zswui ] 分别为 github 的 username 和仓库名

贡献代码

组件都在 components 目录下,单个组件用单个目录存放,在 components 目录下的 index.js 文件中集中对外抛出

可参考 button 组件

贡献代码规范请查看 wiki

Todo List

  • css 提取
  • 组件实现按需加载(tree shaking 摇树)
  • 用 Typescript 改写
  • 中台模板 Zswui Admin
  • 基于这个库实现可视化拖拽构建中台 Vuegg | 云凤蝶

参考组件库

组件库说明
Ant Design服务于企业级产品的设计体系(本项目样式参考)
RsuiteUI 规范参考* (本项目样式结构参考)
Fusion构建一套产品化设计系统和物料
Element基于 Vue 2.0 PC 端网站快速成型工具
iview基于 Vue.js 的高质量 UI 组件库
Vuetify偏向于扁平简洁大气风格
Bootstrap响应式,移动优先的组件库和规范
Material-ui基于 Material Design 设计系统
Semantic-ui偏向于扁平简洁大气风格
Grommet风格偏圆润
React-weui微信体系 UI 风格
React-grid布局参考样式

License

zswui is MIT licensed.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文