# NutUI
[![version](https://img.shields.io/badge/version-1.0-blue.svg?style=flat-square)](http://nutui.jd.com/)
[![license](https://img.shields.io/badge/license-MIT-yellow.svg?style=flat-square)](http://nutui.jd.com/)
> 基于Vue 2.0的移动端轻量级UI组件库
# 安装
``` bash
1、 使用npm安装nutui
npm install nutui --save
```
#### 引用完整组件库
``` bash
1、 在入口文件(如app.js)中引入
import NutUI from 'nutui'
2、 初始化
NutUI.install(Vue)
```
#### 按需引用
``` bash
import Mask from 'nutui/src/package/mask/index'
export default {
data(){
},
components: {
'nut-mask':Mask
},
methods:{
}
}
```
###### 按需引用需要注意,这种方式使用的是未编译的组件源码:
* 需要自行处理组件的依赖关系,将其依赖的组件先行引入
* 需要在自己的项目里使用babel对ES6编译
* 如果该组件用到了SCSS,则需要使用者自行处理vue单文件中的SCSS编译
# 组件用法
###### 组件从使用方法上大致分为两类。
* 一类是扩展 HTML 元素,典型的Vue组件形式,使用方式类似原生HTML元素。
``` bash
如遮罩层(Mask)组件,直接使用nut-mask标签即可
```
* 另一类是Vue构造器的扩展组件,使用方式类似jQuery/Zepto方法。
``` bash
如对话框(Dialog)组件
this.$dialog(options);
提示框(Toast)组件
this.$toast(msg,during);
```
每个组件的使用方式请参考具体组件[文档](http://nutui.jd.com/index.html#/intro)。
# License
[MIT](https://github.com/jdf2e/nutui/blob/master/LICENSE)