▶_MiniApp ToolkitAgent 接入

NutUI

UI 库活跃维护

京东开源的轻量级移动端组件库,支持 Vue 2/Vue 3/React 多版本,适配小程序多端。

6,507🕒 最近更新 2026-04
小程序UI框架UIUI设计

特性

  • 京东风格
  • 轻量级
  • Vue/React双版本
  • 多端适配

详细文档

NutUI 2

A light mobile Toolkit

NutUI

English | 简体中文

Features

  • New structure
  • 50+ Reusable components
  • Used by 40+ JD mobile projects
  • Refer to JD APP 7.0 visual specification
  • On-demand loading Support
  • Detailed documents and examples
  • Customize themes Support
  • Multiple languages Support (Internationalization)
  • TypeScript Support
  • Vue Server-side Rendering Support(Vue SSR)
  • Unit test blessing
  • A Webpack-based build tool is available to quickly create a Vue project with this component library built in

If you want to use the 1.x version, please specify the version number when installing,such as: npm i @nutui/nutui@1.3.2 -S

Environment Support

  • Android 4.0+
  • iOS 8.0+
  • Support Vue Server-side Rendering

Version

You can also subscribe to: https://github.com/jdf2e/nutui/releases.atom for the notifications of stable releases。

Examples

NutUI Demo

Installation

Please refer to the NutUI offcial website for the details on how to use it

https://nutui.jd.com

Documents:2.X | 1.X

Links

User Cases

NutUI has been put into use in our production environment and is widely used in developing countries at the same time.

Call for more excellent cases

实战开发指南

Taro 项目集成

code
npm install @nutui/nutui-taro

app.config.ts 中配置:

code
export default {
  designWidth: 750,
  // NutUI 需要 px 转 rpx
}

Vue3 项目集成

code
npm install @nutui/nutui
code
import { Button } from @nutui/nutui
import @nutui/nutui/dist/style.css

常见问题

  1. Taro 中样式失效:确保 config/index.ts 中配置了 NutUI 的 px 转换规则。

  2. 暗黑模式:NutUI 支持暗黑模式,通过 CSS 变量切换:

code
import @nutui/nutui/dist/dark-theme.css
  1. 按需加载:配合 unplugin-vue-components 实现自动按需引入,减小打包体积。