/uni-nutui

nutui for uni-app

Primary LanguageVueMIT LicenseMIT

项目介绍

NutUI是京东官方开发维护的一套京东风格的Vue组件库,是为Taro工具设计的(Taro是类似于Uni-app的多端工具)
本项目基于NutUI,将代码适配uni-app框架,并保持和官方同步更新
开源地址:https://github.com/jwaterwater/uni-nutui
可以给我点个star

NutUI官方文档

https://nutui.jd.com/#/zh-CN/component/button

演示

微信小程序 H5 Android

Hbuilder开发使用流程

1) 在uni.scss文件引入variables.scss,全局样式变量,可以自定义主题颜色

@import '@/uni_modules/sky-nutui/components/sky-nutui/packages/styles/variables.scss';

2) App.vue文件引入app.scss,包含一些需要全局覆盖的样式

<style lang="scss">
    @import '@/uni_modules/sky-nutui/components/sky-nutui/app.scss';
</style>

3) 配置easycom自动引入,在package.json加入

"easycom": {
      "autoscan": true,
      "custom": {
        "nut-(.*)?-(.*)": "@/uni_modules/sky-nutui/components/sky-nutui/packages/__VUE/$1$2/index.vue",
        "nut-(.*)": "@/uni_modules/sky-nutui/components/sky-nutui/packages/__VUE/$1/index.vue"
      }
}

4) 接下来就可以愉快的使用组件了

<template>
  <nut-button type="primary">主要按钮</nut-button>
  <nut-button type="info">信息按钮</nut-button>
  <nut-button type="default">默认按钮</nut-button>
  <nut-button type="danger">危险按钮</nut-button>
  <nut-button type="warning">警告按钮</nut-button>
  <nut-button type="success">成功按钮</nut-button>
  <nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
    <nut-cell title="链接" is-link></nut-cell>
    <nut-cell title="URL 跳转" desc="https://m.jd.com" is-link url="https://m.jd.com"></nut-cell>
    <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
  </nut-cell-group>
</template>

cli开发使用流程

1) 安装

npm i uni-nutui

1) 在uni.scss文件引入variables.scss,全局样式变量,可以自定义主题颜色

@import 'uni-nutui/components/sky-nutui/packages/styles/variables.scss';

2) App.vue文件引入app.scss,包含一些需要全局覆盖的样式

<style lang="scss">
    @import 'uni-nutui/components/sky-nutui/app.scss'
</style>

3) 配置easycom自动引入,在package.json加入

"easycom": {
      "autoscan": true,
      "custom": {
        "nut-(.*)?-(.*)": "uni-nutui/components/sky-nutui/packages/__VUE/$1$2/index.vue",
        "nut-(.*)": "uni-nutui/components/sky-nutui/packages/__VUE/$1/index.vue"
      }
}

4) 接下来就可以愉快的使用组件了

<template>
  <nut-button type="primary">主要按钮</nut-button>
  <nut-button type="info">信息按钮</nut-button>
  <nut-button type="default">默认按钮</nut-button>
  <nut-button type="danger">危险按钮</nut-button>
  <nut-button type="warning">警告按钮</nut-button>
  <nut-button type="success">成功按钮</nut-button>
  <nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
    <nut-cell title="链接" is-link></nut-cell>
    <nut-cell title="URL 跳转" desc="https://m.jd.com" is-link url="https://m.jd.com"></nut-cell>
    <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
  </nut-cell-group>
</template>

官方文档

https://nutui.jd.com/#/zh-CN/component/button

交流群