@mdsfe/mds-ui/README.md

A set of enterprise-class Vue UI components-beta.

# MDS UI

<p align="center">
  <a href="https://matrix.58.com/">
    <img src="https://matrix.58.com/home/dist/img/logo.gif" width="46" height="46" alt="MATRIX Logo" style="display: inline-block; vertical-align: middle;" />
    <span style="font-size: 32px; vertical-align: middle;">MATRIX</span>
  </a>
</p>

[![Build Status][travis-image]][travis-url] [![license][license-image]][license-url] [![javascript style guide][standard-image]][standard-url] [![version][version-image]][version-url]

[travis-url]: https://www.travis-ci.org
[travis-image]: https://img.shields.io/badge/build-passing-brightgreen.svg
[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
[standard-url]: https://standardjs.com
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg
[license-url]: demo/miniprogram-demo/LICENSE
[version-image]: https://img.shields.io/badge/version-v0.0.9-blue.svg
[version-url]: README.md

> Better enable enterprise project in the background

## Intro

这是基于 [Vue](https://vuejs.org/) 的组件化实现，开发和服务于企业级产品，意旨在帮助开发者快速搭建属于自己的业务应用。

## Install

### npm 安装

> 推荐使用 npm 的方式安装，能更好的和 `webpack` 等打包工具配合使用

```bash
npm install @mdsfe/mds-ui -S
```

### CDN 引用

> 支持在页面上引入 `Js` 和 `Css` 文件既可以开始使用

```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/@mdsfe/mds-ui/dist/mds-ui.min.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/@mdsfe/mds-ui/dist/mds-ui.min.js"></script>
```

`注意`：使用 `CDN` 引入 `mds-ui` 组件库需要在链接地址上锁定版本，避免组件库升级的时候带来兼容性的影响。锁定版本的方法为在连接后面增加版本号。

目前可以通过 [unpkg.com/mds-ui](https://unpkg.com/browse/@mdsfe/mds-ui/) 获取到最新版本的资源，支持在页面上引入 Js 和 Css 文件既可以开始使用。

## Quick Start

### 完整引入

```javascript
import Vue from 'vue'; // 引入Vue
import '@mdsfe/mds-ui/dist/mds-ui.min.css'; // 引入组件的样式
import MdsUi from '@mdsfe/mds-ui'; // 引入组件

Vue.use(MdsUi); // 使用组件
```

### 按需引入

#### 方法一：手动引入

可以通过下面的写法来按需加载组件：

```javascript
import Button from '@mdsfe/mds-ui/dist/button';
```

#### 方法二：使用 babel-plugin-import

也可以使用 `babel-plugin-import` 来进行按需加载：

```javascript
import { Button } from '@mdsfe/mds-ui';
```

`.babelrc` 修改：

```json
{
  "plugins": [
    [
      "import", {
        "libraryName": "@mdsfe/mds-ui",
        "libraryDirectory": "dist",
        "styleLibraryDirectory": "dist/style",
        "style": true
      }
    ]
  ]
}
```

## Browser Support

Modern browsers and Internet Explorer 10+.

## License

[MIT](http://opensource.org/licenses/MIT)