👍基于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';

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

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

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

如果您需要配置自己的主题文件，请参考使用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支持两种按需加载的方式。

import Button from 'vis-ui/lib/components/button';      // 直接单独引入组件
import 'vis-ui/lib/components/button/style/index.css';     // 直接单独引入样式

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

import {Button} from 'vis-ui'

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

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

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