Vue3.0 一套移动端轻量级组件库 https://nutui.jd.com/#/index

FransLee f4ed4d8577 update README.md 8 年 前
dist 4369c5a535 update 8 年 前
scripts 471e1011cd update 8 年 前
src 284a867ad4 init 8 年 前
.babelrc 471e1011cd update 8 年 前
.gitignore 471e1011cd update 8 年 前
LICENSE 5071a856e0 Initial commit 8 年 前
README.md f4ed4d8577 update README.md 8 年 前
package.json 4369c5a535 update 8 年 前
postcss.config.js 471e1011cd update 8 年 前
webpack.config.js 284a867ad4 init 8 年 前

README.md

<img alt="whistle logo" src="http://nutui.jd.com/asset/img/nutui-logo.png">

NutUI

version license

基于Vue 2.0的移动端轻量级UI组件库

安装

1、 使用npm安装nutui
npm install nutui --save

引用完整组件库

1、 在入口文件(如app.js)中引入
import NutUI from 'nutui'

2、 初始化
NutUI.install(Vue)

按需引用

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标签即可 <nut-mask :visible="true"><nut-mask>
  • 另一类是Vue构造器的扩展组件,使用方式类似jQuery/Zepto方法。 bash 如对话框(Dialog)组件 this.$dialog(options); 提示框(Toast)组件 this.$toast(msg,during); 每个组件的使用方式请参考具体组件文档

License

MIT