/vis-ui

👍基于react的前端UI组件化通用库

Primary LanguageCSSMIT LicenseMIT

Vis-UI

npm version License Package Quality No Easter Eggs

👍基于react的前端UI组件化通用库

vis-ui的目标:

  • 一个组件库,部门之间不同项目可以通过配置自己主题的方式来复用
  • 具有良好的可拓展性,对组件开发者友好,能持续沉淀UI组件
  • 提供完善的文档与API接口,对用户友好,简单可依赖

如果您是vis-ui的用户,希望灵活的使用vis-ui来创建自己美丽动人的项目,下面的内容简直就是为您量身定制书写的,请仔细阅读~

如果您是vis-ui的贡献开发者,可以阅读 vis-ui 开发者说明

开始使用

安装

npm install vis-ui --save

使用

首先,直接引入组件

import {Button} from 'vis-ui';
ReactDOM.render(<Button />,mountNode);

然后,手动全量引入样式

import 'vis-ui/lib/vis-ui.css';

你就可以使用一个样式优美的按钮了!

或者你也看这里阅读按需加载组件的方式。

组件示例与API

官网地址:https://huiyan-fe.github.io/vis-ui/pages/

Menu 导航菜单 示例代码 API说明文档

Checkbox 多选框 示例代码 API说明文档

Dropdown 下拉多选 示例代码 API说明文档

CheckboxList 多选框下拉 示例代码 API说明文档

Message 全局提示 示例代码 API说明文档

主题样式

自定义主题

如果您需要配置自己的主题文件,请参考使用vis-ui配置自己的主题。但是这要求您的项目也是用scss来编写样式。

按需加载

全局加载

  • 对于引入组件时,使用import { Button } from 'vis-ui'的写法其实是引入了vis-ui下的所有组件模块,可能会影响网络性能。
  • 对于组件样式,如果您想使用整套的vis-ui,可以使用import 'vis-ui/lib/vis-ui.css',将样式文件在根目录全部导入。
import React from 'react';
import {render} from 'react-dom';
import 'vis-ui/lib/vis-ui.css';     // 一次性引入
import App from './index';

render( <App />, document.getElementById('wrapper'));

按需加载

如果您想使用某个单独的vis-ui组件,单独引入组件也是一个节约资源的选择。vis-ui支持两种按需加载的方式。

1. 直接从路径引入
import Button from 'vis-ui/lib/components/button';      // 直接单独引入组件
import 'vis-ui/lib/components/button/style/index.css';     // 直接单独引入样式
2. 通过babel-plugin-import插件实现按需加载

如果你使用了babel,那么或许这是一种更加优雅的方式,安装这个插件之后,你可以仍然这么写

import {Button} from 'vis-ui'

插件会帮你转换成vis-ui/lib/components/xxx的写法。另外此插件配合style属性可以做到模块样式的按需自动加载。我们也提供了手把手教你配置插件的教程

需要注意的是,以按需加载方式引入会同时包含一些全局样式。如果这会影响到你项目端其他样式,建议你使用上面全局加载的方式来加载样式,然后用你自己的全局样式来覆盖它。

3. 最佳实践

根据个人做的项目经验来看,自认为的最佳实践还是按需加载组件,全量引入样式。 各位看官仅供参考,欢迎讨论~