NutUI 3 - 京东风格的轻量级移动端 Vue 组件库 (A Vue.js UI Toolkit for Mobile Web)

Last update: Jun 28, 2022

NutUI 3

npm version Build Status Coverage Status license

京东风格的轻量级移动端 Vue3 组件库

NutUI

特性

  • 70+ 高质量组件(3.0 持续开发中)
  • 基于京东APP 9.0 视觉规范
  • 支持按需引用
  • 详尽的文档和示例
  • 支持 TypeScript
  • 支持服务端渲染(测试阶段)
  • 支持定制主题
  • 单元测试覆盖(3.0 开发中)

示例

NutUI

支持环境

  • Android 4.0+
  • iOS 8.0+

构建版本

  • es nutui.es.js
  • umd nutui.umd.js

安装使用

具体安装使用方法请参考 NutUI 官网 https://nutui.jd.com

⌨️ 本地开发

你可以使用 Gitpod 进行在线开发:

Open in Gitpod

或者克隆到本地开发:

$ git clone https://github.com/jdf2e/nutui.git
$ cd nutui
$ npm install
$ npm run dev

开源协议

本项目基于 MIT 协议

GitHub

https://github.com/jdf2e/nutui
Comments
  • 1. 来了,老弟~

    :tada::tada:欢迎大家使用NutUI组件库~ :tada::tada:

    如果您在使用过程中遇到什么问题可通过 Issues 或邮件 [email protected] 联系我们。

    目前NutUI已在京东内外众多项目中应用,如果你的项目中也有用到,欢迎留言告诉我们,建议包含以下内容:

    • 产品/项目:
    • 链接:(如果可以)
    • 公司或组织:(如果可以)
    • 截图:(如果可以)
    • Email:(如果可以)

    如果不方便公开,可以通过邮件告诉我们。

    您的支持是我们开发的动力。

    欢迎Star,欢迎PR~

    微信交流群

    Reviewed by Franslee at 2019-03-07 01:16
  • 2. [bug]tabs 在微信小程序里面点击没反应

    问题描述

    tabs 在微信小程序里面点击没反应

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    预期的行为和实际行为

    复现步骤,具体代码

    相关环境信息

    Reviewed by gp5251 at 2021-12-22 11:11
  • 3. [bug]3.1.2版本Tab组件H5不能正常工作

    问题描述

    在h5模式下,显示所有的nut-tab-panel内容,控制台打印如下错误Failed to resolve component: scroll-view,另外当tab页签垂直显示的时候,字体变得特别大。

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    预期的行为和实际行为

    复现步骤,具体代码

    相关环境信息

    • 操作系统:macos big sur
    • Node 版本:16.5
    • NutUI 版本: @nutui/nutui-taro:3.1.2
    • Vue 版本:^3.0.0
    • 引用方式: CDN / NPM ?
    Reviewed by ANDYGE at 2021-07-31 10:39
  • 4. [bug]进度条百分比内显示 100% 时有样式问题

    官方示例中,进度条百分比内显示 100% 时有样式问题 <template> <nut-cell> <nut-progress percentage="100" :text-inside="true" /> </nut-cell> </template>

    Reviewed by bigpigOne at 2022-02-20 04:24
  • 5. [bug] 在案例中创建多个nut-swipe

    image

    问题描述

    例如有三个nut-swipe ,先展开一个,在展开第二个的时候,第一个和第二个同时展开,依次类推

    最小可复现仓库

    在案例中创建多个nut-swipe

    预期的行为和实际行为

    例如有三个nut-swipe ,先展开一个,在展开第二个的时候 关闭第一个,依次类推

    复现步骤,具体代码

    相关环境信息

    • 操作系统: win11
    • Node 版本:v14.18.1
    • NutUI 版本: ^3.1.14
    • Vue 版本:^3.0.0
    • 引用方式: CDN / NPM ? NPM
    Reviewed by Provenceo at 2022-01-18 03:06
  • 6. [bug]折叠面板内容动态加载无法自动撑开高度

    问题描述

    <nut-collapse-item :title="title2" :name="2">
        {{content}}
      </nut-collapse-item>
    

    折叠面板内容动态加载无法自动撑开高度

    预期的行为和实际行为

    动态界面内容可以支持动态高度

    复现步骤,具体代码

    相关环境信息

    Reviewed by wangfpp at 2021-12-06 12:04
  • 7. [question] Icon 组件显示不出来,所有用到Icon的地方都空白

    taro + vue3开发,组件按需加载,在使用Icon组件和button带icon的组件是,icon显示不出来,是我还需要安装其他依赖,还是需要指定 taro相关依赖版本

    	"dependencies": {
    		"@babel/runtime": "^7.7.7",
    		"@nutui/nutui-taro": "^3.1.10",
    		"@tarojs/components": "3.3.14",
    		"@tarojs/plugin-html": "3.3.9",
    		"@tarojs/runtime": "3.3.14",
    		"@tarojs/taro": "3.3.14",
    		"lodash-es": "^4.17.21",
    		"vue": "^3.0.0",
    		"vue-router": "^4.0.11",
    		"vuex": "^4.0.2"
    	},
    
    Reviewed by liuweiyibai at 2021-11-15 14:01
  • 8. [question] taro 中 tabbar 在组件切换时 值改变了状态不对怎么解决

    image <nut-tabbar :v-model:visible="active" @tab-switch="tabSwitch" :bottom="true" unactive-color="#7d7e80" active-color="#5EAA5F" > <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item> <nut-tabbar-item tab-title="学习" icon="category"></nut-tabbar-item> <nut-tabbar-item tab-title="课程" icon="find"></nut-tabbar-item> <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item> </nut-tabbar> const tabSwitch = (item, index) => { let pages = [ { url: "/pages/index/index" }, { url: "/pages/study/index" }, { url: "/pages/courses/index" }, { url: "/pages/profile/index" } ] Taro.switchTab(pages[index]) } 通过switchTab跳转页面没问题,active状态不更新或更新错误

    环境信息

    操作系统:win10 NutUI 版本:@nutui/nutui-taro 3.1.5 Vue 版本:vue3 引用方式: NPM

    Reviewed by xueyuheng at 2021-09-06 05:53
  • 9. scss引入报错

    需要定制样式,按完整组件方式引入,根据官方文档在引入了import '@nutui/nutui/nutui.scss';之后,报错找不到文件。看了下node_modules文件夹下,并没有这个文件,dist下面倒是有。 将路径改为import '@nutui/nutui/dist/nutui.scss';之后,进而又报图片未找到的错误,信息如下:

    * ../../assets/img/img-error.png in ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-1-3!./node_modules/@nutui/nutui/dist/nutui.scss                                   friendly-errors 15:40:04
    * ../../assets/img/img-loading.png in ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-1-3!./node_modules/@nutui/nutui/dist/nutui.scss 
    

    请问是哪里出了问题?

    Reviewed by waitkafuka at 2019-03-27 07:57
  • 10. 用taro升级nutui到3.1.20后运行就失败了 [bug]

    问题描述

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    预期的行为和实际行为

    复现步骤,具体代码

    原来是3.1.8版本 yarn upgrade 后,我的taro就运行失败了,.提示

    ./node_modules/@nutui/nutui-taro/dist/packages/col/index.scss
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Undefined operation "calc(100 / 24) * 1".
        ╷
    110 │     margin-left: calc(100 / 24) * $i * 1%;
        │                  ^^^^^^^^^^^^^^^^^^^
        ╵
      node_modules\@nutui\nutui-taro\dist\packages\col\index.scss 110:18  root stylesheet
        at K:\Web\rent3\node_modules\webpack\lib\NormalModule.js:316:20
        at K:\Web\rent3\node_modules\loader-runner\lib\LoaderRunner.js:367:11
        at K:\Web\rent3\node_modules\loader-runner\lib\LoaderRunner.js:233:18
        at context.callback (K:\Web\rent3\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
        at K:\Web\rent3\node_modules\sass-loader\dist\index.js:62:7
        at Function.call$2 (K:\Web\rent3\node_modules\sass\sass.dart.js:92571:16)
        at _render_closure1.call$2 (K:\Web\rent3\node_modules\sass\sass.dart.js:81074:12)
        at _RootZone.runBinary$3$3 (K:\Web\rent3\node_modules\sass\sass.dart.js:27256:18)
        at _FutureListener.handleError$1 (K:\Web\rent3\node_modules\sass\sass.dart.js:25812:19)
        at _Future__propagateToListeners_handleError.call$0 (K:\Web\rent3\node_modules\sass\sass.dart.js:26110:49)
        at Object._Future__propagateToListeners (K:\Web\rent3\node_modules\sass\sass.dart.js:4536:77)
        at _Future._completeError$2 (K:\Web\rent3\node_modules\sass\sass.dart.js:25942:9)
        at _AsyncAwaitCompleter.completeError$2 (K:\Web\rent3\node_modules\sass\sass.dart.js:25596:12)
        at Object._asyncRethrow (K:\Web\rent3\node_modules\sass\sass.dart.js:4335:17)
        at K:\Web\rent3\node_modules\sass\sass.dart.js:12852:20
        at _wrapJsFunctionForAsync_closure.$protected (K:\Web\rent3\node_modules\sass\sass.dart.js:4360:15)
     @ ./src/app.ts (./node_modules/babel-loader/lib!./src/app.ts) 11:0-56
     @ ./src/app.ts
    
    
    node:internal/process/promises:279
                triggerUncaughtException(err, true /* fromPromise */);
                ^
    
    [UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Array]".] {
      code: 'ERR_UNHANDLED_REJECTION'
    }
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    

    相关环境信息

    • 操作系统: window
    • Node 版本:14
    • NutUI 版本: @nutui/[email protected]
    • Vue 版本:3
    • 引用方式: yarn
    Reviewed by suguer at 2022-05-02 15:55
  • 11. 使用jdt科技主题样式不生效

    你想知道什么?

    你好,我想知道为何使用jdt科技主题样式不生效,我在vue.config.js中引入了下面的配置,自定义的custom_theme.scss 生效,但是variables-jdt.scss没有任何效果 image

    下面是显示效果&配置 image image image

    描述你考虑过的替代方案

    我是一个前端初学者,求解答

    其它

    Reviewed by 929408183 at 2022-04-27 06:48
  • 12. [bug] taro下使用swiper-item组件vue.d.ts文件命名生成错误

    问题描述

    使用taro和vue3+ts开发时,ide识别的d.ts文件识别错误. @nutui-taro/dist/types/_VUE/swiperitem/index.taro.vue.d.ts 文件内的

    declare module 'vue' {
      interface GlobalComponents {
          NutSwiperitem: typeof _sfc_main;
      }
    }   
    

    段代码item的首字符大小写错误,正确应该是大写,这样子ide才能识别出是swiper-item而不是现在的swiperitem连起来了。

    declare module 'vue' {
      interface GlobalComponents {
          NutSwiperItem: typeof _sfc_main;
      }
    }   
    

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    预期的行为和实际行为

    拼写修改正确

    复现步骤,具体代码

    相关环境信息

    • 操作系统:mac
    • Node 版本:node 16
    • NutUI 版本: 3.1.21
    • Vue 版本:3.0
    • 引用方式: npm
    Reviewed by ilovintit at 2022-07-01 06:23
  • 13. [suggest]希望修改一下Taro版本 Input 组件的 readonly 和 disable 的应用逻辑

    希望修改一下Taro版本 Input 组件的 readonly 和 disable 的应用逻辑

    按照目前 v3.1.22 版本,现在情况是这样的:

    比如我有以下这样一个 Input 组件,由输入和右侧按钮组成

    这是我的一个示例组件

    v3.1.22 版本 readonly 和 disable 的应用逻辑分别是:

    • readonly = "true" 的情况下: Input 无法输入,右侧按钮的 click-right-icon 事件无法触发
    • disable = "true" 的情况下: Input 无法输入,右侧按钮的 click-right-icon 事件可以触发

    个人认为这个逻辑有一点不合理,以下是我个人的建议:

    我希望,readonly = "true" 的时候,readonly 只是禁用 Input 的输入功能,左右侧按钮的事件正常触发, 当 disable = "true" 的时候,禁用 Input 的输入功能,左右侧按钮的事件取消或者不让触发

    其它

    Reviewed by yy981420974 at 2022-07-01 03:02
💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.

?? A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.

Jun 28, 2022
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

Ionic Framework Ionic Framework is the open-source mobile app development framework that makes it easy to build top quality native and progressive web

Jul 2, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

Jun 27, 2022
A configurable Mobile UI based on Antd Mobile and Vue
A configurable Mobile UI based on Antd Mobile and Vue

A configurable Mobile UI specification and Vue-based implementation.

Mar 30, 2022
Mobile UI Components based on Vue & WeUI
Mobile UI Components based on Vue & WeUI

Be Cool with [email protected]^2.3.0 and WeUI. Live Demo >> Sponsors 我们的产品 Requirements 暂未适配 [email protected],请注意。 [email protected]^2.3.0(for .sync modifier) [email protected]^2.0 [email protected]^7.6

Jul 1, 2022
Native mobile applications using Vue and NativeScript.
Native mobile applications using Vue and NativeScript.

Supporting NativeScript-Vue NativeScript-Vue is an MIT-licensed open source project made possible by our sponsors: and these awesome backers: Tiago Al

Jul 1, 2022
Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native Visit our website at vue-native.io or read the official documentation here. Build native mobile apps using Vue Vue Native is a framework to

Jun 26, 2022
Mobile UI elements for Vue.js

Mint UI Mobile UI elements for Vue 2.0 Homepage Documentation Installation npm i mint-ui -S # for Vue 1.x npm i [email protected] -S Usage Import all compone

Jun 28, 2022
Lightweight Mobile UI Components built on Vue
Lightweight Mobile UI Components built on Vue

Vant Mobile UI Components built on Vue ?? 文档网站(国内) ?? 文档网站(GitHub) ???? 中文版介绍 Features 65+ Reusable components 1kb Component average size (min+gzip) 9

Jun 28, 2022
A fantastic mobile ui lib implement by Vue.

A fantastic mobile ui lib implement by Vue.

Jun 28, 2022
Hybrid mobile template built with Ionic Vue using capacitor for native builds
Hybrid mobile template built with Ionic Vue using capacitor for native builds

Ionic Vue Mobile Template 03 Hybrid mobile template built with Ionic Vue using c

Feb 13, 2022
Material design mobile component library for Vue3
Material design mobile component library for Vue3

Material design mobile component library for Vue3

Jun 27, 2022
Sahay-mobileapp - Sahay mobile app built using VueJS and Ionic
Sahay-mobileapp - Sahay mobile app built using VueJS and Ionic

A product to help humanity, and India as a country, especially during the novel

Jan 24, 2022
Capybara : Storefront UI based theme for Vue Storefront
Capybara : Storefront UI based theme for Vue Storefront

Capybara - Storefront UI based theme for Vue Storefront New default template theme for Vue Storefront, based on Storefront UI. 90% of the Capybara cod

Nov 2, 2021
NutUI 3 - 一套京东风格的轻量级移动端 Vue3组件库
NutUI 3 - 一套京东风格的轻量级移动端 Vue3组件库

轻量级移动端 Vue 组件库 (A Vue.js UI Toolkit for Mobile Web)

Jul 5, 2022
🐡 A mobile UI toolkit designed for financial scenarios, and compatible with multiple platforms based on Vue DSL(Vue 2.0).
🐡  A mobile UI toolkit designed for financial scenarios, and compatible with multiple platforms based on Vue DSL(Vue 2.0).

Mand [email protected] ?? A mobile UI toolkit designed for financial scenarios, and compatible with multiple platforms based on Vue DSL(Vue 2.0). Webapp Unia

Jun 24, 2022
💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.

?? A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.

Jun 28, 2022
🎨 基于 Vuejs 的 Canvas 组件库
🎨 基于 Vuejs 的 Canvas 组件库

vuc $$ 链接 Demo ??️ 中文文档 ??️ Install npm install --save vuc-input || vuc-carousel ||..... yarn add vuc-input || vuc-carousel || ...... Basic use // v

Jan 19, 2022
BookerUI-Next 是一个基于 Vue3 + TypeScript 的 UI 组件库
BookerUI-Next 是一个基于 Vue3 + TypeScript 的 UI 组件库

BookerUI-Next 组件介绍 BookerUI-Next 是一个基于 Vue3 + TypeScript 的 UI 组件库,这是我在Vue3 和 TypeScript 的项目过程中,开发的一个UI框架。

Mar 13, 2022
First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。

First UI 快速上手 使用 First UI 前,请确保你已经学习并熟练使用过 uni-app 。 安装 方式一 :通过 npm 安装 使通过 npm 安装,需要先通过 vue-cli 创建 uni-app 项目,详见 。 // # Using npm npm install firstui-

Jul 2, 2022